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。