Question

我试图将第一列垂直居中，对于移动模式xs：

 <div class="row toplineheight vcenteritems totalblue visible-xs">
    <div class="col-xs-6 vcenteritems small">Your order</div>
    <div class="col-xs-3">
      <div class="col-xs-12"><span class="tiny">Upfront</span></div>
      <div class="col-xs-12 dollar large middle">0</div>
    </div>

这是我的CSS（bootstrap 3）：

.cart {
  .verticalline {
    border-left: thin solid #f7f7f7;
  }

目前，“您的订单”文字仍然停留在div的顶部。如何在中心对齐？

Codepen：codepen

Answer 1

使用visible-xs元素上的课程.row会覆盖您的display:flex css值。将类移动到包含元素

<强> CODEPEN

<强> HTML

<div class="cart">
  <div class="visible-xs"> <!-- move visible-xs class to a parent container -->
    <div class="row toplineheight vcenteritems totalblue">
      <div class="col-xs-6 vcenteritems small">Your order</div>
      <div class="col-xs-3">
        <div class="col-xs-12"><span class="tiny">Upfront</span></div>
        <div class="col-xs-12 dollar large middle">0</div>
      </div>
      <div class="col-xs-3">
        <div class="col-xs-12"><span class="tiny">Monthly</span></div>
        <div class="col-xs-12 dollar large middle">0</div>
      </div>
    </div>
  </div>
</div>

如何在引导移动模式下垂直居中列？

1 个答案: