Bootstrap 3：连续两个按钮

Question

我正在使用引导程序3并让我的数据来自服务。我正在使用ng-repeat渲染设计，我需要两个按钮才能出现在一行中，如果我们使用移动设备，则需要一个按钮。按钮应位于屏幕中央，如下所示。

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

这是我的html代码

<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应该在这个看一看：https://jsfiddle.net/2zu0oksc/

你可以有一个div与row类和许多col-*

设置col-xs-12到div，你说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/

这工作，但你必须调整你想为它的偏移和山坳大小！