Bootstrap---Fluid layout 流布局

发布时间：2020-12-17 21:06:21 所属栏目：安全来源：网络整理

导读：本人在学习bootstrap时发现一个很奇怪的现象：当下述红色代码加上空格就会自动换行，不加就不会自动换行。 !doctype htmlhtmlheadmeta charset="utf-8"meta name="viewport" content="width=device-width,initial-scale=1.0"titleBootstrap 布局/titlelink

本人在学习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,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,rhoncus dignissim ligula. Curabitur at neque eget . </p>
        </div>
        <div class="span4">
            <h2 class="page-header">区块三</h2>
            <p>Lorem ipsum dolor sit amet,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>

其实可以这么理解：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!