Bootstrap 实例1

Bootstrap 网格系统实例：堆叠的水平

@{
    ViewBag.Title = "Index5";
}


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

    <div class="row">
        <div class="col-md-6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>
                梦游天姥吟留别 / 梦游天姥山别东鲁诸公
                唐代：李白
                海客谈瀛洲，烟涛微茫信难求；
                越人语天姥，云霞明灭或可睹。
                天姥连天向天横，势拔五岳掩赤城。
                天台四万八千丈，对此欲倒东南倾。
                我欲因之梦吴越，一夜飞度镜湖月。
                湖月照我影，送我至剡溪。
                谢公宿处今尚在，渌水荡漾清猿啼。
                脚著谢公屐，身登青云梯。
                半壁见海日，空中闻天鸡。
                千岩万转路不定，迷花倚石忽已暝。
                熊咆龙吟殷岩泉，栗深林兮惊层巅。
                云青青兮欲雨，水澹澹兮生烟。
                列缺霹雳，丘峦崩摧。
                洞天石扉，訇然中开。
                青冥浩荡不见底，日月照耀金银台。
                霓为衣兮风为马，云之君兮纷纷而来下。
                虎鼓瑟兮鸾回车，仙之人兮列如麻。
                忽魂悸以魄动，恍惊起而长嗟。
                惟觉时之枕席，失向来之烟霞。
                世间行乐亦如此，古来万事东流水。
                别君去兮何时还？且放白鹿青崖间，须行即骑访名山。
                安能摧眉折腰事权贵，使我不得开心颜! 
            </p>

            <p>
                望月怀远 / 望月怀古
                唐代：张九龄
                海上生明月，天涯共此时。
                情人怨遥夜，竟夕起相思。
                灭烛怜光满，披衣觉露滋。
                不堪盈手赠，还寝梦佳期。 
            </p>
        </div>

        <div class="col-md-6" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>
                凉州词二首·其一
                唐代：王翰
                葡萄美酒夜光杯，欲饮琵琶马上催。
                醉卧沙场君莫笑，古来征战几人回？ 
            </p>

            <p>
                送杜少府之任蜀州 / 送杜少府之任蜀川
                唐代：王勃
                城阙辅三秦，风烟望五津。
                与君离别意，同是宦游人。
                海内存知己，天涯若比邻。
                无为在歧路，儿女共沾巾。 
            </p>
        </div>
    </div>
</div>

注意事项：

• <div class="container">...</div> 元素被添加，确保居中和最大宽度。
• 一旦添加了容器，接下来您需要考虑以行为单位。添加 <div class="row">...</div>，并在行内添加列 <div class="col-md-6"></div>。
• 网格中的每一行是由 12 个单元组成的，您可以使用这些单元定义列的尺寸。在我们的实例中，有两个列，每个列由 6 个单元组成，即 6+6=12。

也可以尝试其他更多的选项，比如 <div class="col-md-3"></div> 和 <div class="col-md-9"></div> 或 <div class="col-md-7"></div> 和 <div class="col-md-5"></div>。

您可以尝试一下，但要确保总和总是 12。