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

Posted 2023-03-29

【中文标题】如何有一个居中的引导布局

【英文标题】：How to have a centered bootstrap layout

【发布时间】：2013-09-20 01:02:32

【问题描述】：

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

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

【问题讨论】：

欢迎来到 Stack Overflow。很高兴看到您提交了质量问题，但此站点不是编码服务。请不要问如何实现这样的事情。根据proper SO etiquette，您应该展示您尝试过的内容并寻求帮助以改进您的代码或填补空白。不过，我们很乐意帮助您修复代码 :)

【参考方案1】：

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

#container  
   margin: 0 auto;

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

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

【讨论】：

感谢您的帮助，但为什么它不像@Alax Menon 所说的那样自动居中？

【参考方案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