如何正确嵌套Bootstrap网格而不换行？

4nkexdtk 于 2023-03-06 发布在 Bootstrap

关注(0)|答案(1)|浏览(262)

我想做一个左8列，右4列的网格。在右边的4列中，我希望进一步将其拆分为4列和8列。重要的是网格不要缠绕。
这是我的html：

<div class="container">
  <div class="row">
    <div class="col-sm-8 col-md-8">
      A
    </div>
    
    <div class="col-sm-4 col-md-4">
      <div class="col-sm-4 col-md-4">
        B
      </div>
      
      <div class="col-sm-8 col-md-8">
        C
      </div>
    </div>
  </div>
</div>

不幸的是，C显示在B下面，这是我不想看到的。2请问，怎样才能停止网格在下面的缠绕呢？

twitter-bootstrap

来源：https://stackoverflow.com/questions/75572649/how-can-i-nest-bootstrap-grid-properly-without-wrapping-columns

1条答案

按热度按时间

ncgqoxb01#

您只需要为嵌套列使用另一个row容器。

div {
  border: 1px solid black;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
    <div class="row">
       <div class="col-sm-8 col-md-8">
       A
       </div>
       <div class="col-sm-4 col-md-4">
         <div class="row">
           <div class="col-sm-4 col-md-4">
           B
           </div>
           <div class="col-sm-8 col-md-8">
           C
           </div>
         </div>
       </div>
    </div>
</div>

赞(0）回复(0）举报 2023-03-06

我来回答

如何正确嵌套Bootstrap网格而不换行？

1条答案

相关问题

热门标签

最新问答