如何使用 Bootstrap 3 网格答案

【问题标题】：How to use Bootstrap 3 Grid如何使用 Bootstrap 3 网格
【发布时间】：2014-12-07 20:44:58
【问题描述】：

我在让网格工作时遇到了麻烦，我已经关注了多个教程和论坛，但没有任何工作。我正在为我的编辑器使用 Sublime Text，并复制所有 CDN 标签并将所有内容包装在 div="container"

当我预览它时，文本出现在最左边，我做错了什么？

【问题讨论】：

在 CodePen 或 JSFiddle 中试一试，如果仍然无法使用，请发布链接。还要检查浏览器开发者工具控制台是否有任何错误。在 chrome 中它的“检查元素”。
另外，尝试对照Bootlint进行检查
仍然无法让它响应我想要的方式，我已经保存了一个“codepen”供任何人查看，看看我是否在某个地方犯了错误..codepen.io/anon/pen/JoGWgJ@MartinMalinda跨度>
结构看起来不错！ codepen 中唯一的事情是您引用本地引导 css/js 文件。我制作了一个叉子，它指的是来自 cdn 的叉子，请参阅codepen.io/ckuijjer/pen/zxrwON?editors=110。如果您将屏幕放大，您会注意到 Hello World 距屏幕左侧有一些边距。
Bootstrap 未正确包含。一旦一切正常：bootply.com/nVFeYrMdgz

标签： css html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这里是pen

添加了一些类和 css。

 <div class="container">
      <div class="row row-centered">
          <div class="col-xs-12 col-centered">
            Hello World!
          </div>
      </div>
      <div class="row row-centered ">
          <div class="col-*-*"></div>
          <div class="col-*-*"></div>
          <div class="col-*-*"></div>
      </div>
      <div class="row row-centered">

      </div>
  </div>

 /* centered columns styles */
 .row-centered {
     text-align:center;
 }
 .col-centered {
     display:inline-block;
     float:none;
     /* reset the text-align */
     text-align:left;
     /* inline-block space fix */
     margin-right:-4px;
 }

阅读this了解更多详情

【讨论】：