Bootstrap 如何使引导div覆盖多行？

zujrkrfu 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(2)|浏览(208)

我试图弄清楚如何做以下网格与Bootstrap.我想知道，如果它是可能的，首先要创建这种类型的网格.

做水平的div，比如1，2，4，5，7是可以理解的，但是如果div 3和6覆盖了多行呢？
我使用：

<div class="col-sm-4 col-md-4">4</div>
 <div class="col-sm-4 col-md-4">5</div>
 <div class="col-sm-4 col-md-8">6</div>

创建456个部分，但我得到结果看起来像这样：

twitter-bootstrap

来源：https://stackoverflow.com/questions/73335719/how-can-i-make-a-bootstrap-div-to-cover-multiple-rows

2条答案

按热度按时间

cbeh67ev1#

以下是一个非常粗略的想法：

<div class="container">
   <div class="row">
     <div class="col-9 row">
       <div class="col-6 box">1</div>
       <div class="col-6 box">2</div>
       <div class="col-4 row">
         <div class="col-12 box">4</div>
         <div class="col-12 box">5</div>
       </div>
       <div class="col-8 row">
         <div class="col-12 box">6</div>
       </div>
       <div class="col-12 box">7</div>
     </div>
     <div class="col-3 row">
       <div class="box">3</div>
     </div>
   </div>
 </div>

你基本上只需要在你的组周围画一个矩形，这就是它们最终被排序的方式。例如，首先你在everything but 3和3周围画一个矩形，这是你的第一列。然后在1 and 2周围画一个矩形，然后是4, 5 and 6，最后是7等等。

赞(0）回复(0）举报 2022-12-08

von4xj4u2#

这是您尝试实现的网格结构。您可以向其中添加样式以实现精确的输出。

<div class="col-sm-9">
    <div class="col-sm-12">
        <div class="col-sm-6">1</div>
        <div class="col-sm-6">2</div>
    </div>
    
    <div class="col-sm-4">
        <div class="col-sm-12">4</div>
        <div class="col-sm-12">5</div>
    </div>

    <div class="col-sm-8">
        <div class="col-sm-12">6</div>
    </div>

    <div class="col-sm-12">
        7
    </div>
</div>

<div class="col-sm-3">
    3
</div>

赞(0）回复(0）举报 2022-12-08

我来回答

Bootstrap 如何使引导div覆盖多行？

2条答案

相关问题

热门标签

最新问答