Html Boostrap 3，三列，第二个居中

我有引导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引导类时，它们将列定位得过左或过右

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

有什么建议吗

编辑：

---

你能不能将栏目内的内容对齐以获得你想要的内容

左列
中柱
右柱

我相信这不能在引导中完成。但您可以通过添加自定义类和附加标记来实现这一结果。尝试一下，如果这对你来说是有效的，并且不会破坏任何东西：P

HTML

---

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

在网站设计中，我有3列内容。它们由浏览器左侧和右侧的一个boostrap列推送（所以我们有10个备用列）。这些列中的每一列都设计为3个boostrap列宽，因此总结起来，我必须在10列空间中处理9列内容。还有哪两行？我不想使用col-lg-4大小，因为我的页面设计为col-lg-3大小。现在我的解决方案是添加我的自定义类，而不是.col-lg-offset-1:.col-center{margin left:calc（8.33%-65px）；}但我试图找出是否有任何“引导方法”。我不能用flex布局的Bootstrap4。谢谢你的回答。我的猜测是一样的，这是不可能的纯引导创建。所以我采用了同样的方法，我对中心柱使用了额外的类：）正如我在评论中提到的，在这种情况下我不能使用flexbox。但是是的，这是一个可行的选择。

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

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