Bootstrap 实例 3 手机、平板电脑、台式电脑

Bootstrap 网格系统实例：手机、平板电脑、台式电脑

我们要把平板电脑的列分割为 25%/75%，我们将添加如下选项：

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

现在，bootstrap 给我们提供了 3 种不同的列布局，分别适用于三种设备。在手机上，它将是左边 25% 右边 75% 的布局。在平板电脑上，它将是 50%/50% 的布局。在大型视口的设备上，它将是 33%/66% 的布局。

@{
    ViewBag.Title = "Index7";
}


<div class="container">
    <h1>Hello, world!</h1>

    <div class="row">

        <div class="col-sm-3 col-md-6 col-lg-8"
             style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444,
         inset -1px 1px 1px #444;">
            <p>
                关雎
                先秦：佚名
                关关雎鸠，在河之洲。窈窕淑女，君子好逑。
                参差荇菜，左右流之。窈窕淑女，寤寐求之。
                求之不得，寤寐思服。悠哉悠哉，辗转反侧。
                参差荇菜，左右采之。窈窕淑女，琴瑟友之。
                参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。 
            </p>

            <p>
                先秦：佚名

                蒹葭苍苍，白露为霜。所谓伊人，在水一方。
                溯洄从之，道阻且长。溯游从之，宛在水中央。
                蒹葭萋萋，白露未晞。所谓伊人，在水之湄。
                溯洄从之，道阻且跻。溯游从之，宛在水中坻。

            </p>
        </div>

        <div class="col-sm-9 col-md-6 col-lg-4"
             style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444,
         inset -1px 1px 1px #444;">
            <p>
                蒹葭采采，白露未已。所谓伊人，在水之涘。
                溯洄从之，道阻且右。溯游从之，宛在水中沚
            </p>

            <p>
                鱼，我所欲也；熊掌，亦我所欲也，二者不可得兼，舍鱼而取熊掌者也。生，亦我所欲也；义，亦我所欲也。二者不可得兼，舍生而取义者也。生亦我所欲，所欲有甚于生者，故不为苟得也。死亦我所恶，所恶有甚于死者，故患有所不辟也。
            </p>
        </div>
    </div>
</div>