Question

我有Bootstrap 3布局。内容基于12个可用列中的10个。假设我有这样的事情：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 col-lg-offset-1">LEFT COL</div>
        <div class="col-lg-3">CENTER COL</div>
        <div class="col-lg-3 col-lg-pull-1 pull-right">RIGHT COL</div>
    </div>
</div>

有了这个，我的左右列就像我想要的那样定位 - 从浏览器窗口的左右两侧一列宽度。我希望将中心列精确定位在左右列之间的中心，以使它们之间具有相同的边距。

使用offset / pull / push bootstrap类时，它们会向左或向右定位列。

我已经创建了自己的解决方法类.col-center，其工作方式类似于.col-lg-offset-1，我只使用calc（）函数从bootstrap的百分比值中减去像素的偏移量。但在我看来，这种解决方案很糟糕。

有什么建议吗？

修改

sample image to describe better

Answer 1

您是否可以不对齐列中的内容以获取您之后的内容？

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4">LEFT COL</div>
        <div class="col-xs-4 text-center">CENTER COL</div>
        <div class="col-xs-4 text-right">RIGHT COL</div>
    </div>
</div>

＆＃13;

Answer 2

我相信这不能在bootstrap中完成。但是，您可以通过添加自定义类和其他标记来实现此结果。如果这对你有用并且什么都不做就试试：P

HTML

<div class="container-fluid">
<div class="row">
    <div class="col-lg-3 col-lg-offset-1">LEFT COL</div>
    <div class="col-lg-4">
        <div class="col-center col-lg-9"> CENTER COL
        </div>
    </div>
    <div class="col-lg-3 col-lg-pull-1 pull-right">RIGHT COL</div>
</div>
</div>

CSS

.col-center {
    margin: auto;
    float: none;
}

Answer 3

您可以添加flexbox并均匀分配cols。

Boostrap 3，三列，第二个居中

3 个答案: