桌面和平板电脑上的引导 GRID 布局答案

【问题标题】：Bootstrap GRID layout on Desktop and tablet桌面和平板电脑上的引导 GRID 布局
【发布时间】：2017-08-18 06:11:51
【问题描述】：

我正在尝试为台式机和平板电脑创建一个网格布局。我在平板电脑上使用 col-sm，在台式机上使用 col-md。

在桌面上应该是这样的：-

在平板电脑中应该是这样的：-

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

【问题讨论】：

标签： html twitter-bootstrap grid media-queries

【解决方案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>

【讨论】：