부트 스트랩 4에서 센터링 및 정렬이 작동하지 않는 이유는 무엇입니까?

Question

EDIT 코드 펜은 부트 스트랩 4에 대해 잘못된 URL을 사용하고 있습니다. 이미 답변 한 사람들에게 감사드립니다.

이

내 코드

<div class="container"> 
 
    <div class="quote-box text-center"> 
 
     <div class="row"> 
 
     <div class="col quote"> 
 
      asdasdasdsa 
 
     </div> 
 
     </div> 
 
     <div class="row align-items-center"> 
 
     <div class="col text-center"> 
 
      <button class="btn btn-primary social">asasas</button> 
 
      <button class="btn btn-primary social">asasasas</button> 
 
     </div> 
 
     <div class="col-5"> 
 
     </div> 
 
     <div class="col text center"> 
 
      <button class="btn btn-primary"></button> 
 
     </div> 
 
     </div>  
 
    </div> 
 
</div>

codepen이입니다, https://codepen.io/msrashid/pen/EboJoq

행 텍스트 중심이 수직 기둥 중앙을하지 않는 정렬입니다.

텍스트 센터에서 단추가 가운데에 있지 않습니다.

문제가 무엇인지 잘 모릅니다.

Answer 1

귀하의 중앙 집중화가 실제로 작동합니다. 문제는 열이 전체 너비를 차지하지 않으므로 은이 중앙 집중식으로 표시되는 것입니다.

이 문제를 해결하려면 Bootstrap column classes을 사용해야합니다. col 클래스가있는 경우 col-1부터 col-12까지를 사용하려고합니다. 행에는 항상 총 12 개의 열이 있으므로 항상 최대 열까지 합계해야합니다. 전체적으로 (는 5쪽에 3.5 것) 2로 나누어 질 수 없다 - 7 (5 (12))로

내 로우 ? - 5 - ?는 '중앙'할 수 없다. 따라서, 나는 다음과 같은 예에서 독립적 인 행으로 각 세그먼트를 고려했습니다

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="quote-box text-center"> 
 
    <div class="row"> 
 
     <div class="col-12 quote"> 
 
     asdasdasdsa 
 
     </div> 
 
    </div> 
 
    <div class="row align-items-center"> 
 
     <div class="col-12 text-center"> 
 
     <button class="btn btn-primary social">asasas</button> 
 
     <button class="btn btn-primary social">asasasas</button> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-12"> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-12 text center"> 
 
     <button class="btn btn-primary"></button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

희망이 도움이! :)