桌面和平板电脑上的Bootstrap GRID布局

Question

我正在尝试为桌面和平板电脑创建网格布局。我使用col-sm作为平板电脑，使用col-md作为桌面。

在桌面版中它应该如下所示： -

在Tablet中，它应如下所示： -

HTML页面： -

 <div class="row">
                <div class="col-sm-8 col-md-6">
                   <p>content</p>
                </div>
                <div class="col-sm-4 col-md-3" >
                    <div class="row">
                        <div class="col-md-12">
                               <p>content</p>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-12">
                       <p>content</p>
                    </div>
                </div>

                <div  class="col-sm-4 col-md-3 ">
                    <div class="row">
                <div class="col-sm-12">
                        <p>content</p>
                    </div>
                </div>

                    <div class="row">
                <div class="col-sm-12">
                       <p>content</p>
                    </div>
                </div>

    </div>

上面的代码......第3部分和第4部分，低于第2部分。我想按照上面给出的布局进行布局。我该如何实现呢。一个小模板真的会有帮助

Answer 1

这有助于让您更接近所需的布局：http://v4-alpha.getbootstrap.com/layout/grid/

对于您的第一个布局，您还有一行我已在此处删除：https://codepen.io/Squeakasaur/pen/wJxzww

<div class="row">
    <div class="col-sm-8 col-md-6">
        <p>content</p>
    </div>
    <div class="col-sm-4 col-md-3">

        <div class="col-sm-12 col-md-12">
            <p>content</p>
        </div>
    </div>

    <div class="col-sm-4 col-md-3 ">
        <div class="row">
            <div class="col-sm-12">
                <p>content</p>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <p>content</p>
            </div>
        </div>

    </div>