부트 스트랩 4 그리드 시스템의`col`에 패딩이 없습니까?

Question

처음으로 부트 스트랩 4 번을 사용하고 있습니다.

나는 col을 사용하여 footer을 가지고 있으며 데스크톱에서 훌륭하게 작동합니다. 하지만 휴대 전화로 전환하면 서로 너무 가깝게 쌓여있어 수직 마진/패딩이 없습니다.

정상적인 동작입니까?

또한 콘텐츠 중심이거나 적어도 약간의 오프셋이있는 것이 좋습니다. 그러나 오프셋을 사용하면 왼쪽 또는 오른쪽 오프셋 대신 위쪽 패딩이 사용됩니다.

정상적인 동작입니까?

그렇다면 모바일에서의 위쪽 여백/여백 추가 및 오프셋에 대한 권장 "공식적인"접근 방법은 무엇입니까?

감사합니다. 오프셋없이

:와

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<div class="row" id="kpc-row-10"> 
 

 
    <div class="container"> 
 

 
    <div class="row"> 
 

 
     <div class="col-sm"> 
 
     </div> 
 
     
 
     <div class="col-sm"> 
 
     </div> 
 
     
 
     <div class="col-sm"> 
 
     </div> 
 
     
 
     <div class="col-sm"> 
 
     </div> 
 

 
    </div> 
 

 
    </div> 
 
    
 
</div>

오프셋 :

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<div class="row" id="kpc-row-10"> 
 

 
    <div class="container"> 
 

 
    <div class="row"> 
 

 
     <div class="col-sm offset-sm-2"> 
 
     </div> 
 
     
 
     <div class="col-sm offset-sm-2"> 
 
     </div> 
 
     
 
     <div class="col-sm offset-sm-2"> 
 
     </div> 
 
     
 
     <div class="col-sm offset-sm-2"> 
 
     </div> 
 

 
    </div> 
 

 
    </div> 
 
    
 
</div>

Answer 1

"서로 너무 가깝게 겹쳐 있습니다. 수직 여백/패딩이 없습니다."

코멘트에서 이미 언급했듯이 in other questions에는 부트 스트랩의 열 사이에 수직 간격이 없습니다. 그러나, 부트 스트랩 (4)는 각 열에 최고 및 바닥 (y 축) 마진을 추가합니다 예를 my-3 당신은 마진이나 패딩을 조정하기 위해 활용할 수 spacing utility classes ...

이 있습니다.

<div class="container"> 
    <div class="row"> 
     <div class="col-sm my-3"> 

     </div> 
     <div class="col-sm my-3"> 

     </div> 
     <div class="col-sm my-3"> 

     </div> 
     <div class="col-sm my-3"> 

     </div> 
    </div> 
</div> 

데모 : http://www.codeply.com/go/ABUaBgCNbE

는 spacing utilities에 대한 추가 정보를 원하시면 내 다른 답변을 참조하십시오.