Question

是否可以在bootstrap中实现附加网格？每个方块可能都是图像......或者也许是文字！

我已经走了一段路，但是当涉及到左上方的盒子，例如跨越两排时，它会撞墙。

网格：

enter image description here

Answer 1

每当您需要网格跨越多行时，请使用嵌套块。像这样：

<div class="row">
    <div class="col-sm-6"></div>
    <div class="col-sm-6">
        <div class="row">
            <div class="col-sm-6"></div>
            <div class="col-sm-6"></div>
        </div>        
        <div class="row">
            <div class="col-sm-6"></div>
            <div class="col-sm-6"></div>
        </div>
    </div>

    <div class="col-sm-8">
        <div class="row">
            <div class="col-sm-8"></div>
            <div class="col-sm-4"></div>
        </div>
        <div class="row">
            <div class="col-sm-4"></div>
            <div class="col-sm-8"></div>
        </div>
    </div>
    <div class="col-sm-4"></div>
</div>

然后你可以设置块的高度，你的网格很好。

Answer 2

这里是新手。所以当我偶然发现这个问题时，我正在学习制作嵌套网格。

我制作嵌套网格的规则：

1.整个网格将在父容器.row（父包装器）中 2.Columns 总是嵌套在列中，但是所有嵌套的列都必须有一个 .row(column wrapper) 包装器以水平对齐项目，例如：

<div class='col-md-12'>
    <div class='row'>This is the column wrapper.
           <div class='col-md-9'></div>
           <div class='col-md-3'></div>
        </div>
</div>

3.断点很关键 4.您可能需要使用自定义 css 来微调您的网格。

这是我对问题的解决方案：

  <div class='row parent-wrap'>
        <div class='col-sm-6 big-left'>Top Left big</div>
        <div class='col-sm-6 quarter-grid'>
            <div class='row top-wrap'>
            <div class='col-sm-6 top-left'>top-left</div>
            <div class='col-sm-6 top-right'>top-right</div>
         <div class='col-sm-6 bottom-left'>bottom-left</div>
       <div class='col-sm-6 bottom-right'>bottom-right</div>
            </div>
        </div>

        <div class='col-sm-12'>
            <div class='row mid-wrap'>
          <div class='col-sm-3 mid-start'>mid-start</div>
        <div class='col-sm-6 mid-center'>mid-center</div>
        <div class='col-sm-3 mid-end'>mid-end</div>
        </div>

    <div class='col-sm-9'>
        <div class='row bottom-wrap'>
       <div class='col-sm-8 bottom-start'>bottom-start</div>
     <div class='col-sm-4 bottom-center'>bottom-center</div> 
        </div>
    </div>

</div>

基本的自定义 css：

 .parent-wrap{
        margin:100px;
    }

    .big-left{
        background-color: aqua;
        height:300px;
    }
    .top-left{
        background-color:black;
        height:150px;
    }
    .top-right{
        background-color: blue;
        height:150px;
    }
    .bottom-left{
        background-color:brown;
        height:150px;
    }
    .bottom-right{
        background-color:crimson;
        height:150;
    }
    .mid-start{
        background-color:grey;
        height:200px;
    }
    .mid-center{
        background-color: red;
        height:200px;
    }
    .mid-end{
        background-color: pink;
        height:400px;
    }
    .bottom-start{
        background-color:blueviolet;
        margin-left:-15px;
        height:200px;
        margin-top:-200px;
    }
    .bottom-center{
        background-color:burlywood;
        height:200px;
        margin-top:-200px;
    }

在bootstrap中实现复杂的网格

2 个答案: