如何在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>