css - Bootstrap Scrollspy 不适用于 float 内容 (spanX)

标签 css twitter-bootstrap

Scrollspy 似乎不适用于内置 Bootstrap “spanX”类,例如:

这行得通

 <body data-spy="scroll" data-target="#scrollspy-nav">
     <div id="scrollspy-nav" class="span4">
         <ul class="nav nav-tabs nav-stacked affix">
             <li><a href="#test1">Section 1</a></li>
             <li><a href="#test2">Section 2</a></li>
             <li><a href="#test3">Section 3</a></li>
         </ul>
     </div>
     <div>
         <section id="test1">Test 1 <!-- Lots of <br/>'s --></section>
         <section id="test2">Test 2 <!-- Lots of <br/>'s --></section>
         <section id="test3">Test 3 <!-- Lots of <br/>'s --></section>
     </div>
  </body>

这不会:

 <body data-spy="scroll" data-target="#scrollspy-nav">
     <div id="scrollspy-nav" class="span4">
         <ul class="nav nav-tabs nav-stacked affix">
             <li><a href="#test1">Section 1</a></li>
             <li><a href="#test2">Section 2</a></li>
             <li><a href="#test3">Section 3</a></li>
         </ul>
     </div>
     <div class="span8">
         <section id="test1">Test 1 <!-- Lots of <br/>'s --></section>
         <section id="test2">Test 2 <!-- Lots of <br/>'s --></section>
         <section id="test3">Test 3 <!-- Lots of <br/>'s --></section>
     </div>
  </body>

第一个示例(有效的示例)在内容容器 div 上没有 spanX 类。

最佳答案

对于简单的两列布局,创建一个.row 并添加适当数量的.span 列。由于这是一个 12 列的网格,每个 .span* 跨越这 12 列中的许多列,并且每行(或父级中的列数)总和应始终为 12。

   <div class="row">
      <div class="span4">...</div>
      <div class="span8">...</div>
   </div>

© twitter bootstrap

关于css - Bootstrap Scrollspy 不适用于 float 内容 (spanX),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13252477/

相关文章:

html - 在所有屏幕尺寸下将一个 div 对齐到图像的底部,而不考虑文本行

javascript - 如何禁用客户端点击链接按钮或图像按钮

jquery - Bootstrap Popover 在最后一行不起作用

html - Bootstrap CSS - 无法同时获取背景颜色和图像

html - CSS使文本左对齐并同时对齐

css - Div宽度问题

javascript - iPad 上的 UI Bootstrap 复选框和 radio 速度较慢

jquery - 显示模式时关闭 Bootstrap 警报

angularjs - 模式对话框关闭时调用函数的数据属性

我的其他页面的 CSS 背景 : want a diff. 背景