html - 需要使用 Bootstrap 更正这个复杂的布局

Question

我正在尝试使用 twitter-bootstrap 创建一个复杂的布局。但是，我不确定到目前为止我用它取得了什么成就!我对出现元素 4、5、6、7、8 和 9 的嵌套感到特别困惑。

请检查附件的设计。

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

Answer 1

您的嵌套非常好。添加了一些 min-height 属性来测试它并完美运行。您还可以添加 min-height 使其工作。

#one {
background-color: black;
}
#two {
background-color: blue;
}
#three {
background-color: green;
}
#four {
background-color: red;
}
#five {
background-color: yellow;
}
#six {
background-color: orange;
min-height: 40px;
}
#sev {
background-color: violet;
}
#eight {
background-color: gold;
min-height: 30px;
}
#nine {
background-color: brown;
min-height: 30px;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="row">
                        <div id="one" class="col-md-12">1</div>
                    </div>
                    <div class="row">
                        <div id="two" class="col-md-12">2</div>
                    </div>
                    <div class="row">
                        <div id="three" class="col-md-12">3</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="row">
                                <div id="four" class="col-md-12">4</div>
                            </div>
                            <div class="row">
                                <div id="five" class="col-md-12">5</div>
                            </div>
                        </div>
                        <div id="six" class="col-md-4">6</div>
                    </div>
                    <div class="row">
                        <div id="sev" class="col-md-12">7</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="row">
                        <div id="eight" class="col-md-12">8</div>
                    </div>
                    <div class="row">
                        <div id="nine" class="col-md-12">9</div>
                    </div>  
                </div>
            </div>
        </div>