Bootstrap網格樣式忽略了偏移量

Question

我想創建一個這樣的div，它位於主div的中心。 該div的寬度應為500px。 看起來像這樣：

我想使用自舉網格，以便能夠響應，但是由於內容顯示在同一行中，因此我遇到了一些困難。 我試圖這樣做：

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

}

由於某些原因，它不起作用，並且全部出現在同一行中，並且未考慮offset列。 有人可以幫我嗎？

Answer 1

為了使電網的工作，你有一個包裹里面的div的div與容器class （見引導文檔網格 ）。 另外，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>

Answer 2

我開始查看您的代碼，最終完成了此操作，並且非常接近您想要的內容。 自舉的事情是這樣的：你必須有一個div的行那么div的山坳。 HTML的大小如下：

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12">
        <a href="#" class="btn btn-block">GET DETAILS</a>
    </div>
    <div class="row text-center text">
      <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>
</div>