Question

据我所知，通过指定您希望跨越的可用列数来创建网格列。当我创建列并看到总和小于12时，我应该如何处理空白区域？

http://www.bootply.com/dmPaHyDcUg

 <div class="container well">
  <div class="row">
      <div class="col-md-1">
      <label>Card<br> number</label>
      </div>

    <div class="col-md-1">
      <input data-length="4" class="txtinput" placeholder="XXXX" maxlength="4" type="text">
    </div>

    <div class="col-md-1">
      <input data-length="4" class="txtinput" placeholder="XXXX" maxlength="4" type="text">
    </div>

    <div class="col-md-1">
      <input data-length="4" class="txtinput" placeholder="XXXX" maxlength="4" type="text">
    </div>

    <div class="col-md-1">
      <input data-length="4" class="txtinput" placeholder="XXXX" maxlength="4" type="text">
    </div>
  </div>
</div>

Answer 1

您使用偏移来补偿！

假设你想要一个4 col宽的div居中（但行数是12，对吗？）你可以这样做：

<div class="col-md-4 col-md-offset-4"></div>

看起来像这样：

<强> |关4 | 4 col | - -

现在你在中间有一个4 col宽的div（右边4个cols偏移+缺少4个cols）

或者假设你想要一个右边对齐的7 col宽div：

<div class="col-md-7 col-md-offset-5">

看起来像这样：

<强> |关5 | __7 c o l__ |

如此处所述：Bootstrap Column Offset

使用.col-md-offset- *类向右移动列。这些类通过*列增加列的左边距。例如，.col-md-offset-4在四列上移动.col-md-4。

Bootstrap列网格澄清

1 个答案: