Question

我一直在尝试基本复制Bootstrap主页，但我仍然坚持他们如何让侧边栏工作。

似乎他们使用了Affix插件。我按照建议创建了CSS，虽然它在我的浏览器最大化时似乎有效，但是当它是一个小手机大小的窗口时却没有。

而不是侧边栏和内容相继跟随，它们重叠。

http://bootply.com/95495 相关代码从第30行开始。

注意：欢迎似乎也是错误的，但我只能在Bootply上得到它。

Answer 1

您需要阅读bootstrap 3 Grid

的文档

http://getbootstrap.com/css/#grid

但是你有解决方案

您需要为小型设备设置网格，如下所示：

class =“col-md-3 col-sm-3 col-xs-3”

选中此Fiddle

<div class="container">
  <div class="row">
    <div class="col-md-3 col-sm-3 col-xs-12">
      <div data-spy="affix" data-offset-top="0" class="hidden-print" role="complementary">
        <ul class="nav">
          <li>
            <a href="#1.0">1.0</a>
            <ul class="nav">
              <li>
                <a href="#1.1">1.1</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#2.0">2.0</a>
            <ul class="nav">
              <li>
                <a href="#2.1">2.1</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-md-9 col-sm-9  col-xs-12">
      <div class="page-header">
          <h1>Welcome!</h1>
      </div>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id diam nec felis bibendum rutrum a et lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin vitae mollis nisi. Donec vel eleifend tortor. Sed quis pharetra lectus. Vestibulum lacus lacus, laoreet vel justo nec, blandit fringilla dui. Vestibulum bibendum euismod luctus. Cras non mauris ultrices, pharetra orci in, tempor turpis. Donec ut purus tristique, lacinia felis faucibus, sollicitudin erat. Integer a eros vel nisl rutrum dapibus. Integer nulla felis, mattis quis luctus sed, faucibus non eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sed euismod quam. Fusce velit ipsum, rhoncus venenatis luctus vitae, vestibulum eget dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris et ipsum nisl.
          </div>
    </div>
  </div>
</div>

无法获得Twitter Bootstrap附加功能

1 个答案: