引導程序4卡 - 窗口大小調整點

Question

我有一個快速引導4問題，我確定他們是一個簡單的解決方案，但我不是一個Web開發人員，只是試圖完成這件事。

我的問題是：

我試圖得到一個簡單的3卡的佈局時，窗口大小要打破對1列作爲下一個破發點。

例如，它跳過3張牌，分別降到2張以上和1張，然後直接轉到每張牌下。

希望是有道理的。 任何意見，我怎麼能實現這一點，將不勝感激。

由於所有

Answer 1

您需要使用行和cols以實現（即COL-12; COL-SM-6; COL-MD-4）：

採取下面作爲參考的例子：

<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="row"> 
 
    <div class="col-12 col-sm-6 col-md-4"> 
 
    <div class="card"> 
 
     <div class="card-block"> 
 
     <h3 class="card-title">Special title treatment</h3> 
 
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 
 
     <a href="#" class="btn btn-primary">Go somewhere</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-12 col-sm-6 col-md-4"> 
 
    <div class="card"> 
 
     <div class="card-block"> 
 
     <h3 class="card-title">Special title treatment</h3> 
 
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 
 
     <a href="#" class="btn btn-primary">Go somewhere</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-12 col-sm-6 col-md-4"> 
 
    <div class="card"> 
 
     <div class="card-block"> 
 
     <h3 class="card-title">Special title treatment</h3> 
 
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 
 
     <a href="#" class="btn btn-primary">Go somewhere</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-12 col-sm-6 col-md-4"> 
 
    <div class="card"> 
 
     <div class="card-block"> 
 
     <h3 class="card-title">Special title treatment</h3> 
 
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 
 
     <a href="#" class="btn btn-primary">Go somewhere</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-12 col-sm-6 col-md-4"> 
 
    <div class="card"> 
 
     <div class="card-block"> 
 
     <h3 class="card-title">Special title treatment</h3> 
 
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 
 
     <a href="#" class="btn btn-primary">Go somewhere</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-12 col-sm-6 col-md-4"> 
 
    <div class="card"> 
 
     <div class="card-block"> 
 
     <h3 class="card-title">Special title treatment</h3> 
 
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 
 
     <a href="#" class="btn btn-primary">Go somewhere</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

如果你想添加下面的你可以做這樣的卡空間：

.card { 
    margin-bottom: 20px; 
} 

希望它幫助