如何在bootsrap排左侧添加空格？

Question

我想知道什么是在 左侧增加空间的最佳方式，它使用了col-sm- *。 我能够使用如下所示的空白div来实现它。

  <div class="row"> 
       <div class="col-sm-1" > 
        <!-- I want to remove this div --> 
       </div> 
       <div class="col-sm-2" > 
        Text1 
       </div> 
       <div class="col-sm-3"> 
        Text2 
       </div> 
       <div class="col-sm-3"> 
        Text3 
       </div> 
       <div class="col-sm-3"> 
        Text4 
       </div> 
      </div> 

但这不是一个好方法。我们如何做到这一点，而不使用空格？

Answer 1

使用此代码：

.col-sm-2 col-sm-offset-1 

在第二个div

如下：

<div class="row">     
      <div class="col-sm-2 col-sm-offset-1" > 
       Text1 
      </div> 
      <div class="col-sm-3"> 
       Text2 
      </div> 
      <div class="col-sm-3"> 
       Text3 
      </div> 
      <div class="col-sm-3"> 
       Text4 
      </div> 
     </div> 

Answer 2

可以使用Bootstrap's Offsetting Column类通过在第一列应用col-sm-offset-1类来实现这一目标如下：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-sm-2 col-sm-offset-1" > 
 
    Text1 
 
    </div> 
 
    <div class="col-sm-3"> 
 
    Text2 
 
    </div> 
 
    <div class="col-sm-3"> 
 
    Text3 
 
    </div> 
 
    <div class="col-sm-3"> 
 
    Text4 
 
    </div> 
 
</div>