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>