引导程序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; 
} 

希望它帮助