Bootstrap 网格系统 1 行两列成 2 行

Posted 2023-03-21

【中文标题】Bootstrap 网格系统 1 行两列成 2 行

【英文标题】：Bootstrap grid system 1 row with two columns into 2 rows

【发布时间】：2021-12-25 13:58:16

【问题描述】：

所以我的网格上有这个布局

但随着宽度变小，我想更改为这种布局

目前为止我是这样的

.row > div 
  border: 1px solid black

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
  <div class="col-md-6">
   1
  </div>
  <div class="col-md-5">
    <div class='row'>
      <div class="col-md-12">
      2
      </div>
      <div class="col-md-12">
      3
      </div>
    </div>
  </div>
 
</div>

【问题讨论】：

这可能会有所帮助：***.com/questions/45367864/…

【参考方案1】：

像这样？

<div class='row'>
   <div class="col-md-6 col-sm-6">
      1
   </div>
   <div class="col-md-6">
      <div class='row'>
         <div class="col-md-12 col-sm-6">
            2
         </div>
         <div class="col-md-12 col-sm-12">
            3
         </div>
      </div>
   </div>
</div>

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案2】：

我认为 CSS Grid 布局到论文和可定制的最佳实践方式

.grid > div 
  border: 1px solid black;


.grid 
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;


@media (min-width: 768px) 
  .one 
    grid-row: 1/3;
  


.three 
  grid-column: 1/3;

@media (min-width: 768px) 
  .three 
    grid-column: 2/3;
  

<div class='grid'>

  <div class="one">
    1
  </div>

  <div class="two">
    2
  </div>
  <div class="three">
    3
  </div>

</div>