需要使用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以使其正常工作。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;