7

如果我有以下内容，则链接文本将漂亮地换行到下一行：

<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>

4

5 回答 5

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/#code

于 2017-08-14T10:30:35.657 回答
1

尝试使用弹性盒

.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/

于 2017-08-15T08:57:57.960 回答
0 
 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>

尝试这个

于 2017-08-17T16:52:30.887 回答
0

固定元素仍然可以从其父元素继承其宽度，width: inherit似乎可以解决问题，无需动态计算它：

.sidenav.affix {
  width: inherit;
}

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

在这里更新了小提琴。

我不得不data-spy="affix"从ul搬到.sidenav。很抱歉无法从我所在的位置跨浏览器测试它。让我知道它是否有效。

于 2017-08-17T18:27:45.203 回答
-1

我遇到了同样的问题，并通过为 affix 元素设置 max-width 来解决它。

在你的情况下：

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

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

于 2017-08-14T10:07:08.960 回答