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

时间:2017-03-25 08:25:32

标签: html twitter-bootstrap grid media-queries

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

在桌面版中它应该如下所示: - enter image description here

在Tablet中,它应如下所示: -

enter image description here

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部分。我想按照上面给出的布局进行布局。我该如何实现呢。一个小模板真的会有帮助

1 个答案:

答案 0 :(得分:0)

这有助于让您更接近所需的布局: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>