bootsrap 행의 왼쪽에 공백을 추가하는 방법은 무엇입니까?

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

사용이 코드를 아래로 두 번째 사업부에서

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