盒子引导程序中的网格

Question

我正在尝试像下面的照片那样构建网格

图片链接：http://postimg.org/image/qo3b4nof1/

但我得到的 DIV E 几乎在 D-DIV 旁边

这是我的代码

<div class="container">
    <div class="row">
        <div class="col-md-1">
            <div class="col-md-1">A</div><br/>
            <div class="col-md-1">B</div><br/>
            <div class="col-md-1">C</div>
        </div>
        <div class="col-md-11">D<br/>
            <div class="col-md-1">E</div>       
        </div>
    </div>
</div>

我添加的分隔线是因为 DIV-A 和 DIV-B 成为一体，没有分隔线。

用桌子做会更好吗？

Answer 1

你不需要在 bootstrap 3 中使用容器和行。*

我更改了您的代码以匹配提供的屏幕截图，请参阅http://jsfiddle.net/Sd2zw/。 我只是使用 xs 列，因为 jsfiddle 的小屏幕，你可以用 md 替换它：

    <div>
        <div class="col-xs-1">
            <div class="col-xs-12">A</div>
            <div class="col-xs-12">B</div>
            <div class="col-xs-12">C</div>  
            <span class="clearfix"></span>
        </div>
        <div class="col-xs-11">
            <div class="col-xs-12 d-container">D</div>
            <div class="col-xs-12">
                <div class="col-xs-1">E</div>  
                <span class="clearfix"></span>
            </div>    
        </div>
        <span class="clearfix"></span>
    </div>

另外，使用一些 clearfix 标签来清除浮动。