Question

我有一个＆＃34;导航栏＆＃34;在我的页面的左侧像这样：

<nav>
  <ul class="nav nav-pills nav-stacked span2">
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">four</a></li>
    <li><a href="#">five</a></li>
  </ul>
</nav>

我的问题非常普遍 - 如何强制此导航栏一直向下移动到页面的左侧而不创建一千个列表项？现在，我的内容也从我想要的地方开始，但是当它超过导航栏的底部后，它开始在导航栏下放置内容。我希望所有内容都放在此导航栏的右侧。

Answer 1

从它的声音中，您需要利用引导网格来实现列。试试这个：

<div class="row">
  <div class="col-md-3">
    <nav>
    <ul class="nav nav-pills nav-stacked span2">
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">four</a></li>
    <li><a href="#">five</a></li>
    </ul>
   </nav>
  </div>

  <div class="col-md-9">
     //Main content which won't get floated under the nav
   </div>
</div>

参考：http://getbootstrap.com/css/#grid

使用twitter bootstrap / rails视图强制内容到页面中心

1 个答案: