Bootstrap 的网格系统是基于 flexbox 构建的，支持12列布局。
响应式断点
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">列1</h5>
<p class="card-text">在中等屏幕上占4列</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">列2</h5>
<p class="card-text">在中等屏幕上占4列</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">列3</h5>
<p class="card-text">在中等屏幕上占4列</p>
</div>
</div>
</div>
</div>
</div>
提示： 这是一个重要的概念，需要特别注意理解和掌握。
注意： 这是一个常见的错误点，请避免犯同样的错误。