如何在bootstrap中创建复杂的网格并做出响应

Question

我通过此代码在网格下创建， 复杂的网格引导程序：

但是当调整浏览器窗口大小时，面板布局不正确。如果我的英语不好，请原谅我。

.mm{
    border-radius:5px;
    border:2px solid black;
    color:black;
    font:bold 50px b yekan;
    text-align:center;
}

<div class="row">
            <div class="col-md-9 col-sm-9 col-xs-12 pad "><div class="mm" style="height:150px;background-color:#c78221">1</div></div>
            <div class="col-md-3 col-sm-3 col-xs-12 pad"><div class="mm" style="height:300px;background-color:#ffd800">2</div></div>
        </div>
        <div class="row">
            <div class=" col-md-2 col-sm-3 col-xs-12 pad" style="top:-150px"><div class="mm" style=" height:300px;background-color:#9158ee">3</div></div>
            <div class="col-md-7 col-sm-6 col-xs-12 pad" style="top:-150px"><div class=" mm" style="height:150px;background-color:#ff006e">4</div></div>
            <div class="col-md-3"></div>
        </div>
        <div class="row">
            <div class="col-md-2 col-sm-3  pad" style="top:-300px"></div>
            <div class="col-md-2 col-sm-3  pad" style="top:-300px"><div class="mm" style="height:150px;background-color:#4cff00">5</div></div>
            <div class="col-md-4  pad" style="top:-300px"><div class="mm" style="height:300px;background-color:#1f9cdc">6</div></div>
            <div class="col-md-4   pad" style="top:-300px"><div class="mm " style="height:300px;background-color:#ff00dc">7</div></div>
        </div>
        <div class="row">
            <div class="col-md-4 pad" style="top:-450px"><div class="mm" style="height:150px;background-color:#1a8d43">8</div></div>
        </div>

Answer 1

首先看官方的bootstrap页面，了解网格系统的工作原理。 Grid system here

我已经在bootply上为您创建了一个演示

Bootply demo

希望这个帮助