ブートストラップ3：2つのボタンが並んでいます

Question

私はブートストラップ3を使用しており、サービスからデータを取得しています。私はデザインをレンダリングするためにng-repeatを使用しています。私は1つの行に2つのボタンを表示し、モバイルを使用していて1つのボタンを1つ使用しています。ボタンは、以下のように画面の中央に配置する必要があります。

      Button Text 1   Button Text 2 
          Button Tex 3   Button Text 4 

これは私のhtmlコード、私は2つの列を強制するために複数の行を使用して回避する方法

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 

 
    <div class="row"> 
 
     <div class="col-sm-4 col-md-offset-2"><button type="button" class="btn btn-default btn-block">Here sits text 1</button></div> 
 
     <div class="col-sm-4"><button type="button" class="btn btn-default btn-block">Here sits text 2</button></div>  
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-sm-4 col-md-offset-2"><button type="button" class="btn btn-default btn-block">Here sits text 3</button></div> 
 
     <div class="col-sm-4"> 
 
      <button type="button" class="btn btn-default btn-block" style="word-wrap: break-word;">Here sits text 4 </button></div>  
 
    </div> 
 

 
</div>

のですか？

私のng-repeatは、このデザインでは機能しないため、いくつかの列をレンダリングするよう求めていますか？質問の

アップデート：私は答えを使用して更新した

は現在、以下の作業を提案：

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-4 col-md-offset-2 col-sm-offset-2 col-lg-offset-2 col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;"> 
 
     <button type="button" class="btn btn-primary btn-block">Button text 1</button> 
 
     </div> 
 
     <div class="col-sm-4 col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;"> 
 
     <button type="button" class="btn btn-primary btn-block">Button text 2</button> 
 
     </div> 
 
     <div class="col-sm-4 col-md-offset-2 col-sm-offset-2 col-lg-offset-2 col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;"> 
 
     <button type="button" class="btn btn-primary btn-block">Button text 1</button> 
 
     </div> 
 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;"> 
 
     <button type="button" class="btn btn-primary btn-block">Button text 4</button> 
 
     </div> 
 
    </div>

はcolsのために同じスタイルを使用することが可能ですそれを動作させる（代替列にオフセットがある）

Answer 1

私はthinkyouは、このを見てみる必要があります：あなたは、クラスrowとdiv要素にcol-xs-12を設定する多くのcol-*

とdivを持つことができhttps://jsfiddle.net/2zu0oksc/

、あなたはそれがすべての行を取る小型デバイスにtaht言っています幅。

これはコードです：

<div class="row"> 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;"> 
     <button type="button" class="btn btn-primary">Button text 1</button> 
     </div> 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;"> 
     <button type="button" class="btn btn-primary">Button text 2</button> 
     </div> 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;"> 
     <button type="button" class="btn btn-primary">Button text 3</button> 
     </div> 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;"> 
     <button type="button" class="btn btn-primary">Button text 4</button> 
</div> 
</div> 

Answer 2

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-8 col-xs-offset-2"> 
     <div class="col-xs-2 col-xs-offset-4"> 
     <button class="btn btn-primary"> 
     Text 1 
     </button> 
     </div> 
     <div class="col-xs-2 col-xs-offset-1"> 
     <button class="btn btn-primary"> 
     Text 1 
     </button> 
    </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-8 col-xs-offset-2"> 
    <div class="col-xs-2 col-xs-offset-4"> 
     <button class="btn btn-primary"> 
     Text 1 
     </button> 
     </div> 
     <div class="col-xs-2 col-xs-offset-1"> 
      <button class="btn btn-primary"> 
      Text 1 
     </button> 
     </div> 
    </div> 
    </div> 
</div> 

https://jsfiddle.net/wuy235f9/

これは動作しますが、あなたは、あなたがそれを望むオフセットとCOLサイズを調整する必要があります！