Bootstrap---Fluid layout 流布局

最新推荐文章于 2024-06-22 09:39:33 发布

gocpplua

最新推荐文章于 2024-06-22 09:39:33 发布

阅读量5.7k

点赞数 2

分类专栏： PHP从入门到精通文章标签： Bootstrap Fluid layout 遇到空格自动换行 div css span

本文链接：https://blog.csdn.net/chenqiai0/article/details/42886907

版权

PHP从入门到精通专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本人在学习bootstrap时发现一个很奇怪的现象：

当下述红色代码加上空格就会自动换行，不加就不会自动换行。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 布局</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<div class="container-fluid">
    <h1 class="page-header">布局<small> 使用Bootstrap网格系统布局网页</small></h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. Maecenas facilisis tellus quis nisl facilisis eget mollis lectus feugiat. Etiam pharetra mattis ultrices. In ac mi metus, ac pharetra ipsum. Aenean imperdiet sem purus. Suspendisse quis odio eu neque varius posuere. Fusce tincidunt tincidunt arcu non viverra. Vivamus dui eros, rhoncus cursus porta quis, sollicitudin a ante. Aliquam porta euismod sollicitudin.</p>
    <div class="row-fluid">
        <div class="span4">
            <h2 class="page-header">区块一</h2>
            <p>consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
        </div>
        <div class="span4">
            <h2 class="page-header">区块二</h2>
            <p>Lorem ipsum dolor sit amet, quam accumsan vestibulum，consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p>
        </div>
        <div class="span4">
            <h2 class="page-header">区块三</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
            <div class="row-fluid">
            <div class="span6">aaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa</div>  <span style="color:#FF0000;"><strong><!-- 添加空格就会自动换行 --></strong></span>
            <div class="span6">babbbbbbbbb bbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbb</div>
            </div>
        </div>
    </div>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script> 
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>

其实可以这么理解：

注意：浏览器会把一个很长的一串字符（条件是在这串字符中没有空格，换行符等字符出现）当成一个英文单词了，一个单词在英文中显示是不会换行的，所以就不能换行。如果你在其中加入了个空格的话，一个单词就变成了两个单词了，这样就可以换行了。汉字就不会出现这种情况。