在引导网格中设置列答案

【问题标题】：Setting columns in bootstrap grid在引导网格中设置列
【发布时间】：2020-03-08 09:32:44
【问题描述】：

我在引导程序中处理网格，现在我有 4 个列，但是当屏幕大小设置为 md（或 sm）时，我需要将其设置为两行（每行有两列）。我怎样才能得到它？

<div class="container">
 <div class="row">
  <div class="col">
    <div class="panel panel-blue">This is a column.</div>
  </div>
  <div class="col">
     <div class="panel panel-purple">This is a column.</div>     
   </div>
<div class="col">
     <div class="panel panel-purple">This is a column.</div>     
   </div>
<div class="col">
    <div class="panel panel-purple">This is a column.</div>     
 </div>
<div class="col">
      <div class="panel panel-purple">This is a column.</div>     
   </div>
 </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

它已经在文档https://getbootstrap.com/docs/4.3/layout/grid/#responsive-classes 中

你可以使用

<div class="container">
 <div class="row">
  <div class="col-sm-12 col-md-6">
    <div class="panel panel-blue">This is a column.</div>
  </div>
  <div class="col-sm-12 col-md-6">
     <div class="panel panel-purple">This is a column.</div>     
   </div>
<div class="col">
     <div class="panel panel-purple">This is a column.</div>     
   </div>
<div class="col-sm-12 col-md-6">
    <div class="panel panel-purple">This is a column.</div>     
 </div>
<div class="col-sm-12 col-md-6">
      <div class="panel panel-purple">This is a column.</div>     
   </div>
 </div>
</div>

【讨论】：

【解决方案2】：

代替：

<div class="col">

使用：

<div class="col-md-6">

Bootstrap 默认使用 12 列布局。

当然，查看官方文档了解更多信息。

【讨论】：

【解决方案3】：

终于明白了，只是设置

col-sm-6 col-md-auto

【讨论】：