Bootstrap 3，三列，第二个居中答案

【问题标题】：Boostrap 3, three columns, second centeredBootstrap 3，三列，第二个居中
【发布时间】：2017-10-27 21:41:44
【问题描述】：

我有 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>

有了这个，我可以按照我想要的方式定位左右列 - 浏览器窗口的左侧和右侧都有一个列宽。而且我想将中心列准确地定位在中心，左右列之间，以使它们之间具有相同的边距。

当使用偏移/拉/推引导类时，它们将列定位在左侧或右侧过多。

我已经创建了自己的解决方法类 .col-center，它的工作方式类似于 .col-lg-offset-1，只是我使用 calc() 函数从引导程序的百分比值中减去以像素为单位的偏移量。但在我看来，这种解决方案有点糟糕。

有什么建议吗？

编辑：

sample image to describe better

【问题讨论】：

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

【解决方案1】：

你不能对齐列中的内容来得到你想要的吗？

<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>

【讨论】：

在网站设计中，我有 3 列内容。它们由浏览器左右两侧的 1 个 boostrap 列推动（所以我们有 10 个备用列）。这些列中的每一列都设计为 3 列宽，所以总结起来我必须在 10 列空间中处理 9 列内容。

【解决方案2】：

我相信这不能在引导程序中完成。但是您可以通过添加自定义类和附加标记来实现此结果。试试这是否对您有用并且不会破坏任何东西：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;
}

【讨论】：

还有什么两行？我不想使用 col-lg-4 尺寸，因为我有为 col-lg-3 尺寸设计的页面。我现在的解决方案是添加我的自定义类而不是 .col-lg-offset-1: .col-center { margin-left: calc(8.33% - 65px);但我试图弄清楚是否有任何“引导方式”。而且我不能将 bootstrap 4 与 flex 布局一起使用。
感谢您的回答。我的猜测是一样的，用纯引导创建是不可能的。所以我采取了同样的方法，我正在为中心列使用额外的类:)

【解决方案3】：

您可以添加 flexbox 并均匀分布列。

【讨论】：

正如我在评论中提到的，在这种情况下我不能使用 flexbox。但是，是的，这是一个可行的选择。