Sidenav с аффиксом - ссылки не переносятся на следующую строку

Если у меня есть следующее, текст ссылки переносится на следующую строку красиво:

<div class="sidenav" id="site-navbar">
<ul class="nav nav-pills nav-stacked" >
      <li><a href="#h0">A very very very very very very very very very long thing</a></li>

Однако, если я добавлю аффикс, текст останется на той же строке и будет перекрывать столбец основного содержимого:

<div class="sidenav" id="site-navbar">
<ul class="nav nav-pills nav-stacked" data-spy="affix">
      <li><a href="#h0">A very very very very very very very very very long thing</a></li>

Есть ли способ исправить это с помощью CSS? Кроме того, я могу сделать это без редактирования текущего CSS.

Вот скрипка для демонстрации переполнения: https://jsfiddle.net/75nLbwyb/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Example of navbar overflow</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<body data-spy="scroll" data-target="#navbar-example">
  <div class="row">
    <div class="container">
      <div class="col-sm-3">
        <div class="sidenav" id="navbar-example" data-spy="affix">
          <ul class="nav nav-pills nav-stacked" data-offset-top="1">
            <li><a href="#headline0">Section 1</a></li>
            <li><a href="#headline1">Section 2 - a very very long thing</a></li>
            <li><a href="#headline2">Section 3</a></li>
          </ul>
        </div>
      </div>
      <div class="col-sm-9">
        <div id="headline0">
          <h1>Section 1</h1>
        </div>
        <p>
          blah </p>
        <div id="headline1">
          <h2>Section 2</h2>
        </div>
        <p> blah blah blah blah </p>
        <p> blah blah blah blah </p>
        <p> blah blah blah blah </p>
        <p> blah blah blah blah </p>
        <p> blah blah blah blah </p>
        <p> blah blah blah blah </p>
        <p> blah blah blah blah </p>
        <p> blah blah blah blah </p>
        <p> blah blah blah blah </p>
        <p> blah blah blah blah </p>
        <p> blah blah blah blah </p>
        <p> blah blah blah blah </p>
        <p> blah blah blah blah </p>
        <p> blah blah blah blah </p>
        <p> blah blah blah blah </p>
        <div id="headline2">
          <h2>Section 3</h2>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
        </div>
        <p>
          fddf
      </div>
    </div>
  </div>
</body>

Источник

5 ответов

Основная проблема, с которой вы сталкиваетесь, заключается в том, что ваш .nav контейнер (которому принадлежит .affix класс) получает position:fixed как только вы прокрутите. Неподвижные элементы ориентируются в окне просмотра браузера, поэтому он игнорирует ширину родительского элемента. .col-sm-3 Контейнер из начальной загрузки (25% ширины контейнера) и перекрывающий текст справа.

Ваше единственное решение - добавить значение ширины к .affix класс для вашего навигационного контейнера не нарушит компоновку. HTML разметка пока хорошо! Может быть, вам нужно внести некоторые коррективы для мобильного стиля (имейте это в виду):

.nav.affix {  
  width: 150px;
  background: #fff; 
  z-index: 1;
  /* background and zindex for mobile styles, currently layout breaks  */
}

Проверьте боковую панель документации по начальной загрузке. Они также добавляют ширину к элементу класса аффиксов! - https://getbootstrap.com/docs/3.3/css/

Источник

Попробуй использовать flexbox

.container-new {
 display: flex;
}
    <title>Example of navbar overflow</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  <body data-spy="scroll" data-target="#navbar-example">
    <div class="row">
      <div class="container container-new">
        <div class="col">
          <div class="sidenav" id="navbar-example">
            <ul class="nav nav-pills nav-stacked" data-spy="affix"  data-offset-top="1">
              <li><a href="#headline0">Section 1</a></li>
              <li><a href="#headline1">Section 2 - a very very long thing asd as das das das das d</a></li>
              <li><a href="#headline2">Section 3</a></li>
            </ul>
          </div>
        </div>
        <div class="col">
          <div id="headline0">
            <h1>Section 1</h1></div>
          <p>
            blah </p>
          <div id="headline1">
            <h2>Section 2</h2></div>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <p> blah blah blah blah </p>
          <div id="headline2">
            <h2>Section 3</h2>
            <p> blah blah blah blah </p>
            <p> blah blah blah blah </p>
            <p> blah blah blah blah </p>
            <p> blah blah blah blah </p>
            <p> blah blah blah blah </p>
            <p> blah blah blah blah </p>
            <p> blah blah blah blah </p>
            <p> blah blah blah blah </p>
            <p> blah blah blah blah </p>
            <p> blah blah blah blah </p>
            <p> blah blah blah blah </p>
            <p> blah blah blah blah </p>
            <p> blah blah blah blah </p>
            <p> blah blah blah blah </p>
            <p> blah blah blah blah </p>
          </div>
          <p>
            fddf
        </div>
      </div>
    </div>
  </body>

https://jsfiddle.net/75nLbwyb/4/

Источник 
 css:

  body {
  position: relative;
  }
  .affix {
  top: 20px;
   }
  div.col-sm-9 div {
  height: 250px;
  font-size: 28px;
   }

 @media screen and (max-width: 810px) {
 #section1, #section2, #section3, #section41, #section42  {
    margin-left: 150px;
    }
  }


 <body data-spy="scroll" data-target="#myScrollspy" data-offset="15">


<div class="container">
  <div class="row">
    <nav class="col-sm-3" >
      <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
          <ul class="dropdown-menu">
        <li><a href="#section41">Section 4-1</a></li>
        <li><a href="#section42">Section 4-2</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div class="col-sm-9">
  <div id="section1">    
    <h1>Section 1</h1>
    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
  </div>
  <div id="section2"> 
    <h1>Section 2</h1>
    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
  </div>        
  <div id="section3">
    <h1>Section 3</h1>
    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
  </div>
  <div id="section41">
    <h1>Section 4-1</h1>
    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
  </div>      
  <div id="section42">
    <h1>Section 4-2</h1>
    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
  </div>
    </div>
  </div>
    </div>

Попробуй это

Источник

Фиксированный элемент все еще может наследовать свою ширину от своего родителя, width: inherit кажется, делает свое дело, нет необходимости динамически вычислять это:

.sidenav.affix {
  width: inherit;
}

.sidenav.affix .nav-pills {
  width: calc(80% - 30px);
}

Обновленная скрипка здесь.

Я должен был двигаться data-spy="affix" от ul в .sidenav, Извините за то, что я не смог протестировать его через браузер. Дайте мне знать, если это работает.

Источник

У меня была та же проблема, и я исправил ее, установив max-width для элемента affix.

В твоем случае:

.nav.affix {
  max-width: 145px;
}

https://jsfiddle.net/75nLbwyb/2/

Источник
Другие вопросы по тегам