1

我正在尝试将我购买的 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。

  • 其次，thespan9和thespan2处于不同的层次。

  • 第三，container我设置spanNdiv之前不是必须先用a建立网格吗？第一个span2只是悬挂在太空中。

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

4

1 回答 1

1

Twitter bootstrap 有很多预先编写的 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

希望能帮助到你

于 2013-02-22T15:19:57.417 回答