带有1个大列的Twitter Bootstrap网格

Question

I am having a go at Twitter Bootstrap 3 for the first time and seem to be getting stuck when it comes to the grid system.

I am ok when it comes to using rows but I am trying to achieve a simple layout like the below image..

I can't even work out how to begin! Does anybody have a link to a jsfiddle or similar I can have a look at to read up on?

Answer 1

Use this structure:

<div class="container">
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
            </div>
        </div>
    </div>
</div>

Essentially you create two columns, and in the second column you are creating a new grid to hold your four cells. You can change the md in col-md-6 to break at the resolution you need.

jsFiddle example