ブートローブ行の左側にスペースを追加するにはどうすればよいですか？

Question

の左側にスペースを追加する最も良い方法は、col-sm- *を使用するbootsrap行です。 以下に示すように、空の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> 

しかし、それは良い方法ではありません。私たちは空のdivを使わずにそれをやり遂げることができますか？

Answer 1

使用このコード：以下のように第二のdivで

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

次のように

<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

あなたは、最初の列にクラスcol-sm-offset-1を適用することによって、これを達成するためにBootstrap's Offsetting Columnクラスを使用することができます。

<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>