ブートストラップグリッドスタイルがオフセットを無視しています

Question

メインdivの中央に配置されているようなdivを作成したいと思います。 このdivの幅は約500ピクセルです。 これは次のようになります。

私はブートストラップグリッドを使用して応答しますが、コンテンツが同じ行に表示されているため、これらのデバイスでは問題が発生しています。それが動作していないと、すべてが同じ行に表示され、オフセット列を考慮して取られていないいくつかの理由から

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

} 

：

<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：私はこのようにそれを実行しようとしました。誰かが私を助けることができますか？

Answer 1

グリッドを動作させるには、divの内部にdivの内容をラップして、コンテナclass（bootstrap docs grid参照）を入れてください。また、ブートストラップはモバイルであることを意味しています。指定した場合、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>