ブーツストラップに積み重ねるときに目立たないようにする

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

ROWの中央子要素

1にCOL-SM/MD/LG-6月12日の子要素にクラス

Go]を追加し、それを「中央ブロックのクラスを与えます「

しかし、それはブートストラップ> 3.0.0

例のためです：

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