本人在学习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>其实可以这么理解:
原文:http://blog.csdn.net/chenqiai0/article/details/42886907