부트 스트랩에 스태킹 할 때 divs가 중앙에 있지 않음

Question

부트 스트랩으로 테스트 사이트를 구성하고 어딘가 그리드 시스템을 오해하고 있다고 생각합니다.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-4 col-12 text-center"> 
 
     <div class="card" style="width: 20rem;"> 
 
     <img class="card-img-top" src="cheryl-winn-boujnida-65955.jpg" alt="Card image cap"> 
 
     <h4 class="card-title"> 
 
      <i class="fa fa-circle-o-notch" aria-hidden="true"></i> Fast photo printing</h4> 
 
     <p class="card-text">Upload content and have it sent to your address within 3 hours</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-4 col-12 text-center"> 
 
     <div class="card" style="width: 20rem;"> 
 
     <img class="card-img-top" src="neonbrand-371471.jpg" alt="Card image cap"> 
 
     <h4 class="card-title"> 
 
      <i class="fa fa-superpowers" aria-hidden="true"></i> Total access</h4> 
 
     <p class="card-text">Access your media from any device, from any location</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-4 text-center"> 
 
     <div class="card" style="width: 20rem;"> 
 
     <img class="card-img-top" src="allef-vinicius-205147.jpg" alt="Card image cap"> 
 
     <h4 class="card-title"> 
 
      <i class="fa fa-ravelry" aria-hidden="true"></i> Freedom 
 
     </h4> 
 
     <p class="card-text">Choose your package to suit your needs and usage</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

div의 멋지게 수평으로 정렬 한 후 그들이 실제로 첫 번째 브레이크 포인트에서 스택 않는 대형 화면에서 : 나는 다음과 같은 코드가 있습니다. 그러나 그들이 쌓을 때 그들은 왼쪽에 맞 춥니 다. 그리고 나는 또한 col-12을 추가함으로써 (이것이 col-xs-12을 대체했다는 것을 이해할 수있다) 화면의 전체 너비를 차지할 것이라는 인상을 받았다. 그러나 이것 역시 일어나지 않는다. 행에서

Answer 1

CENTER 자식 요소

이동합니다 COL-SM/MD/LG-6/12, 그것을 '센터 블록의 클래스를 줄의 자식 요소에 클래스 추가

1 '

그러나 부트 스트랩> 3.0.0

예를 들면 다음과 같습니다

,691 363,210

<div class="col-lg-12"> 
    <div class="child center-block"> 
</div> 

2. 여백 자동

당신이 당신의 문제에 다음과 같은 특성을

.className{ 
    float: none; 
    margin: 0 auto; 
} 

솔루션을 중심으로 할 요소를 부여는 다음과 같습니다 :

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 

 
    <div class="row"> 
 

 

 
    <div class="col-lg-4 col-sm-12 text-center"> 
 

 
     <div class="card center-block" style="width: 20rem;"> 
 

 

 
     <img class="card-img-top img-responsive" src="https://cdn.pixabay.com/photo/2016/09/01/10/23/image-1635747_960_720.jpg" alt="Card image cap"> 
 

 

 
     <h4 class="card-title"> 
 

 
      <i class="fa fa-circle-o-notch" aria-hidden="true"></i> Fast photo printing</h4> 
 

 
     <p class="card-text">Upload content and have it sent to your address within 3 hours</p> 
 

 
     </div> 
 

 
    </div> 
 

 
    <div class="col-lg-4 col-sm-12 text-center"> 
 

 
     <div class="card center-block" style="width: 20rem;"> 
 

 
     <img class="card-img-top img-responsive" src="https://cdn.pixabay.com/photo/2017/01/06/23/21/soap-bubble-1959327_960_720.jpg" alt="Card image cap"> 
 

 
     <h4 class="card-title"> 
 

 
      <i class="fa fa-superpowers" aria-hidden="true"></i> Total access</h4> 
 

 
     <p class="card-text">Access your media from any device, from any location</p> 
 

 
     </div> 
 

 
    </div> 
 

 
    <div class="col-lg-4 col-sm-12 text-center"> 
 

 
     <div class="card center-block" style="width: 20rem;"> 
 

 
     <img class="card-img-top img-responsive" src="https://cdn.pixabay.com/photo/2016/11/29/10/07/animal-1868911_960_720.jpg" alt="Card image cap"> 
 

 
     <h4 class="card-title"> 
 

 
      <i class="fa fa-ravelry" aria-hidden="true"></i> Freedom 
 

 
     </h4> 
 

 
     <p class="card-text">Choose your package to suit your needs and usage</p> 
 

 
     </div> 
 

 
    </div> 
 

 
    </div> 
 

 

 
</div>