CSS/Bootstrap造型问题

Question

我正在尝试配置我的站点的一个内容部分，但是我在引导网格系统上遇到了问题。

参见我的示例：http://www.bootply.com/121304

在我的网站设计中，我在行类中使用列-lg-3和列-lg-9.作为帮助部分和内容区域。在我大部分页面的内容部分，我使用了整个栏-lg-9.然而，在我的几个页面中，我使用了水平对齐的表单，比如登录页面(不知道ajax来实现登录模式)。以及输入表格。在带有输入表单的页面上，我希望保持列-lg-9的适当大小，但在其中以登录/输入字段为中心。

在阅读了一些引导文档之后，我尝试通过在列-lg-9中添加3列-lg-3‘s来成功地完成这一任务。正如您在我的引导示例中所看到的，这还没有将登录表单完全集中在更大的列中，而且理想情况下，我也希望将此表单集中在其父列中。

Answer 1

只需从受影响的DIVS的CSS中删除float: left即可。

Answer 2

创建一个新的类，例如.col-centered，并将它应用于您想要居中的任何列。

<div class="col-lg-3 col-centered">

CSS

.col-centered{
    float: none;
    margin: 0 auto;
}

此外，通过查看您的代码，您似乎正在尝试使用空<div class="col-lg-3"></div>来抵消。这是不正确的。您不需要使用空的divs来实现这一点。

使用偏移类，如<div class="col-lg-3 col-lg-offset-6">...</div> 文档