Question

我正在尝试将我购买的Bootstrap主题应用到我拥有的Rails应用程序中。布局似乎相当复杂，有多个容器，其中一些容器在导航栏中。我根本不明白。我想确保这种布局是正确的做事方式，而不是因为我买了它而不相信它是正确的。

以下是一个例子：

<div class="span2">

  <!-- Top navigation bar -->
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container-fluid">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <div class="nav-collapse">
          <ul class="nav">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a class="menu" href="/item1">Item1</a></li>
                <li><a class="menu" href="/item2">Item2</a></li>
                <li><a class="menu" href="/item3">Item3</a></li>
              </ul>
            </li>
            <li><a href="#">Help</a></li>  
          </ul> <!-- nav -->
        </div><!-- nav-collapse -->
      </div> <!-- container -->
    </div> <!-- navbar-inner -->
  </div> <!-- navbar -->
</div> <!-- span2 -->

<!-- Main Content -->
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span9">
      <!-- stuff -->
    </div> <!-- span9 -->
  </div> <!-- row-fluid -->

  <div class="row-fluid">
    <div class="footer span12">
      <div class="well">
        <footer>
          &copy; MyCompany, LLC 2013
        </footer>
      </div>
    </div><!-- /span12 -->
  </div> <!-- row-fluid -->

</div> <!-- container-fluid -->

这看起来很奇怪。

首先，我认为我有12列可以使用，但9 + 2以上只等于11。
其次，span9和span2处于不同的级别。
第三，在设置container div之前，我不必建立一个spanN的网格吗？第一个span2只悬挂在太空中。

如果我不得不将其提炼下来，我想我的主要问题是：Twitter Bootstrap中容器的主要用途是什么？我似乎无法通过Google或Bootstrap文档找到这个问题的答案。知道这可能会帮助我确定拥有多个容器是否合理。感谢您提供任何帮助。

Answer 1

Twitter引导程序有很多预先编写的CSS，你可以通过在html中调用它的类来使用它。如果你看一下twitter bootstrap页面上的一些例子，你可以看到所有div都是有原因的。当您使用twitter bootstrap定义的类时，请忽略非常规的html标签。

如果你看一下布局教程

http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

它解释了如何嵌套列以定位需要多个div的div？

导航教程就在这里

http://twitter.github.com/bootstrap/components.html#navbar

回答您的容器问题。

固定布局提供仅具有

的公共固定宽度（和可选的响应）布局

<div class="container"> required.

http://twitter.github.com/bootstrap/scaffolding.html#layouts

希望有所帮助

在Twitter Bootstrap网站中是否应该有多个容器div？

1 个答案: