Question

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

请参阅我的bootly示例：http://www.bootply.com/121304

在我的网站设计中，我在行类中使用了列-lg-3和列-lg-9。用作帮助部分和内容区域。在我的大多数页面的内容区域中，我使用整个列-lg-9。但是在我的一些页面中，我使用水平对齐的表单，例如登录页面（不知道ajax以使登录模式工作......）和输入表单。在具有输入表单的页面上，我希望将列-lg-9保持在适当的大小，但是将登录/输入字段置于其中心。

在阅读了一些引导程序文档之后，我尝试通过在列-lg-9中添加3列-lg-3来取得少量成功。正如您在我的bootply示例中所看到的，这并未将登录表单完全置于较大列的内部，理想情况下，我还希望将此表单置于其父列中。

Answer 1

创建一个新类，例如.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> Documentation

Answer 2

您只需要从受影响的DIVS的CSS中删除float: left

CSS / Bootstrap样式问题

2 个答案: