Bootstrap 2->3不同之span4

最新推荐文章于 2025-05-13 11:49:25 发布

酸菜谭丶

最新推荐文章于 2025-05-13 11:49:25 发布

阅读量3.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Bootstrap java 文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/t876587201/article/details/71080033

java 同时被 2 个专栏收录

15 篇文章

订阅专栏

Bootstrap

1 篇文章

订阅专栏

本文介绍了一个常见的Bootstrap布局问题：如何正确使用栅格系统。从span4到col-lg-4的迁移，详细解释了不同版本间的差异及正确的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Bootstrap学习中，遇到了这么一个问题：

	<div class="container">
		<h1 class="page-header">
			布局<small>小标题</small>
		</h1>
		<p>这是一段描述文字。。。</p>

		<div class="row">
			<div class="span4">
				<h2 class="page-header">副标题1</h2>
				<p>这是一段描述文字。。。</p>
			</div>

			<div class="span4">
				<h2 class="page-header">副标题2</h2>
				<p>这是一段描述文字。。。</p>
			</div>

			<div class="span4">
				<h2 class="page-header">副标题3</h2>
				<p>这是一段描述文字。。。</p>
			</div>
		</div>
	</div>

其中，Bootstrap的css与js都引入成功，但是还是没有显示出自己想要的效果，原因如下：

class="span4"是Bootstrap v2版本的内容，在v3版本中，将class="span4"替换成了class="col-xx-##"

As of bootstrap 3.0...spanX have been depreciated,instead,col-xx-## is used now where xx can be lg, md, sm or xs and # ranges from 1 to 12。

意思就是：xx 可以是lg md sm xs

##可以是整数0-12

	<div class="container">
		<h1 class="page-header">
			布局<small>小标题</small>
		</h1>
		<p>这是一段描述文字。。。</p>

		<div class="row">
			<div class="col-lg-4">
				<h2 class="page-header">副标题1</h2>
				<p>这是一段描述文字。。。</p>
			</div>

			<div class="col-lg-4">
				<h2 class="page-header">副标题2</h2>
				<p>这是一段描述文字。。。</p>
			</div>

			<div class="col-lg-4">
				<h2 class="page-header">副标题3</h2>
				<p>这是一段描述文字。。。</p>
			</div>
		</div>
	</div>