css - 如何有一个居中的引导布局

Question

我需要创建一个响应式布局，我之前使用过引导程序，但我从未真正尝试过。制作全宽设计很容易，但我想要一个两列布局，它会说.. 最大宽度为 900 像素。

我正在尝试做的示例实际上可以在 stackoverflow 上看到。该站点有两列，但两列现在都以页面为中心，左右有空间。我只需要那个（并且对较小的屏幕也有响应）。

Answer 1

假设您的容器有一个 id，container您可以通过提供auto左右边距来将其居中，例如：

#container { 
   margin: 0 auto;
}

默认引导网格的宽度是960px并且默认情况下已经居中。您只需要分配一个名为containerlike

<div class="container">
     <!-- The begin your row -->
     <div class="row">
          <div class="span8">
               Demo right part of stackoverflow
          </div>
          <div class="span4">
               Demo left part of stackoverflow         
          </div>
     </div>
</div>

Answer 2

如果您使用 Bootstrap 网格系统创建布局，它会自动将容器 div 对齐到水平居中，无需任何操作。只需按照以下代码：

<div class="container">
     <div class="row">
          <div class="span8">
               <!-- left column -->
          </div>
          <div class="span4">
               <!-- right column -->        
          </div>
     </div>
</div>

此外，您可以查看此页面以了解 Bootstrap 网格的工作原理 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php