jquery - Bootstrap 网格样式忽略偏移量

Question

我想创建一个像这样的 div，它位于主 div 的中心。这个 div 应该有大约 500px 的宽度。它看起来像这样:

我想使用 bootstrap grid 以便它响应，但我遇到了困难，因为内容出现在同一行中。我试着这样做:

<div class="center">
    <div class="row col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3">
      <a href="#" class="btn btn-block"> GET DATIALS</a>
      <p class=" col-xs-3 col-sm-3 col-md-3 col-lg-3"></p>
    </div>
    <div class="row col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3">
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 line">
          Text 1
      </div>
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 line">
        Text 2
      </div>
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
        Text 3
      </div>
    </div>

  </div>

和CSS:

.line{
  border-right: 1px solid #ccc;
}
.delete{
  background-color: hsl(160, 0%, 18%) !important;
  color: #fff !important;
  border-radius: 0 !important;
  height: 47px;

}

由于某些原因，它不起作用，并且所有内容都出现在同一行中，并且不考虑偏移列。有人可以帮助我吗？

Answer 1

为了让网格工作，您必须将您的 div 包装在一个带有容器 class 的 div 中(参见 bootstrap docs grid )。此外，bootstrap 是移动优先的，这意味着如果您指定给定的 col-xs-* 此 class 将传播到更大的列类，因此如果您需要相同数量的所有 xs、sm、md 和 lg 中的列您只需要指定 xs。

现场演示:
http://www.bootply.com/QztQES4NTI

标记

<div class="center text-center container">
<div class="row">
    <div class="col-xs-4 col-xs-offset-4 ">
    <!-- I added btn-primary but feel free to remove it if not needed -->
        <a href="#" class="btn btn-block btn-primary"> GET DATIALS</a>
        <p class=" col-xs-3"></p>
    </div>
</div>
<div class="row">
    <div class="col-xs-offset-4">
        <div class="col-xs-2 line">
            Text 1
        </div>
        <div class="col-xs-2 line">
            Text 2
        </div>
        <div class="col-xs-2 ">
            Text 3
        </div>
    </div>
</div>