Question

我有一个场景，我需要连续居中3个div的div。在计算时，答案显示为1.5，但克服这一挑战的正确方法是什么？

<div class="row">
  <div class="col-md-offset-2 col-md-3" style="height: 50px; background-color: red">
  </div>

  <div class="col-md-3" style="height: 50px; background-color: green">    
  </div>

  <div class="col-md-3" style="height: 50px; background-color: orange">      
  </div>
</div>

这是一个小提琴：https://jsfiddle.net/DTcHh/25558/

col-md-offset-2搞砸了这一点，因为它为另一端留下了col-1。如果有col-md-offset-1.5那将是辉煌但显然没有:(

我尝试添加填充和边距，它开始变得非常混乱，并且认为我指向了错误的方式。

没有任何hacky方式将3个div放在中心的正确方法是什么？

Answer 1

我通过从第一个内部div中删除偏移类来找到解决方案，为该特定.row容器分配一个额外的类（在我的示例中为.x）并为其添加以下CSS类：

.x {
  width: 100%;
  margin: 0 12.5%;
}

这是一个包含完整代码的codepen：http://codepen.io/anon/pen/bwRZyJ

Answer 2

尝试删除偏移量，并将4更改为4。

<div class="row">
  <div class="col-xs-4" style="height: 50px; background-color: red">

  </div>
   <div class="col-xs-4" style="height: 50px; background-color: green">

  </div>
   <div class="col-xs-4" style="height: 50px; background-color: orange">

  </div>
</div>

这会连续放3个div，每个屏幕占33％

更新：

    <div class="container">
      <div class="row col-xs-10 col-xs-offset-1">
        <div class="col-xs-3" style="height: 50px; background-color: red">

        </div>
         <div class="col-xs-3" style="height: 50px; background-color: green">

        </div>
        <div class="col-xs-3" style="height: 50px; background-color: orange">

        </div>
      </div><!--row-->
    </div><!--container-->

水平居中3个cols的3个div

2 个答案: