在采用bootstrap最新版本V3開發(fā)系統(tǒng)框架時(shí)，參考了一個(gè)基于2.xx版本的框架結(jié)構(gòu)。
上方一個(gè)header，設(shè)定高度定值，寬度100%；
左側(cè)div采用浮動(dòng)，float:left，設(shè)置寬度200px，右側(cè)不設(shè)置浮動(dòng)，寬度自適應(yīng)，則會(huì)制作出一個(gè)左側(cè)固定，右側(cè)占據(jù)剩余100%的div。
形成上、左、右的結(jié)構(gòu)。效果圖如下：
融合了bootstrap3強(qiáng)大的響應(yīng)式布局理念后，在繼續(xù)縮小寬度，左側(cè)會(huì)自動(dòng)取消浮動(dòng)，占據(jù)寬度100%，變成豎著打開的菜單，效果就是這樣了，具體細(xì)節(jié)不是這次討論的主題。
所遇到的問題就出現(xiàn)了，當(dāng)點(diǎn)擊左側(cè)的下拉菜單時(shí)，會(huì)導(dǎo)致右側(cè)的第一欄車輛基本信息內(nèi)的高度增加，很詭異的跟著左側(cè)下拉菜單的動(dòng)畫效果，也增長了！效果圖：
換了火狐、谷歌、IE10，效果都是這樣，不同的是有的瀏覽器會(huì)高一些。
既然出現(xiàn)了問題，開始分析：
1、先嘗試在開發(fā)工具中對(duì)左側(cè)的nav菜單設(shè)置高度，果然，設(shè)置高度后，右側(cè)也增高了。所以問題暫時(shí)定位在左側(cè)高度處理上，嘗試了height、max-height后，發(fā)現(xiàn)并非如此，但max-height設(shè)置大了后，右側(cè)所跟隨變大的也會(huì)變大。
結(jié)論是：右側(cè)增高的高度，與左側(cè)的高度相同。
左側(cè)代碼：
<nav id="sidebar" class="collapse navbar-collapse">
<ul>
<li class="active"><a href="index.html"><i class="glyphicon glyphicon-home"></i> <span>系統(tǒng)首頁</span></a> </li>
<li> <a href="#"><i class="glyphicon glyphicon-list"></i> <span>車輛查詢</span></a> </li>
<li> <a href="#"><i class="glyphicon glyphicon-edit"></i> <span>新維護(hù)單</span></a> </li>
<li class="submenu"> <a href="#"><i class="glyphicon glyphicon-cog"></i> <span>系統(tǒng)管理</span> <i class="glyphicon glyphicon-chevron-down"></i></a>
<ul>
<li><a href="#">基本配置</a></li>
</ul>
</li>
<li class="submenu"> <a href="#"><i class="glyphicon glyphicon-cog"></i> <span>系統(tǒng)管理</span> <i class="glyphicon glyphicon-chevron-down"></i></a>
<ul>
<li><a href="#">基本配置</a></li>
<li><a href="#">用戶管理</a></li>
</ul>
</li>
<li class="submenu"> <a href="#"><i class="glyphicon glyphicon-cog"></i> <span>系統(tǒng)管理</span> <i class="glyphicon glyphicon-chevron-down"></i></a>
<ul>
<li><a href="#">基本配置</a></li>
<li><a href="#">用戶管理</a></li>
<li><a href="#">角色管理</a></li>
</ul>
</li>
<li class="submenu"> <a href="#"><i class="glyphicon glyphicon-cog"></i> <span>系統(tǒng)管理</span> <i class="glyphicon glyphicon-chevron-down"></i></a>
<ul>
<li><a href="#">基本配置</a></li>
<li><a href="#">用戶管理</a></li>
<li><a href="#">角色管理</a></li>
<li><a href="#">基本配置</a></li>
<li><a href="#">用戶管理</a></li>
<li><a href="#">角色管理</a></li>
<li><a href="#">基本配置</a></li>
<li><a href="#">用戶管理</a></li>
<li><a href="#">角色管理</a></li>
<li><a href="#">基本配置</a></li>
<li><a href="#">用戶管理</a></li>
<li><a href="#">角色管理</a></li>
</ul>
</li>
</ul>
</nav>
#sidebar { position:absolute;width: 200px; z-index: 16; margin-left:-15px;}
2、是不是右側(cè)的菜單出現(xiàn)了什么特殊的屬性導(dǎo)致？
<div class="panel-heading">
<h3 class="panel-title">車輛基本信息</h3>
</div>
<div class="panel-body spicel">
<div class="row">
<div class="col-md-4 col-sm-6 form-group"><label for="cph">車牌號(hào)：</label><input type="text" name="cph" placeholder="例如：黑A 88888號(hào)" class="form-control" /></div>
<div class="col-md-4 col-sm-6 form-group"><label for="jsy">駕駛員：</label><input type="text" name="jsy" placeholder="例如：張三" class="form-control" /></div>
<div class="col-md-4 col-sm-6 form-group"><label for="lxfs">聯(lián)系方式：</label><input type="text" name="lxfs" placeholder="例如：13904512345" class="form-control" /></div>
</div>
</div>
實(shí)際效果中css代碼：
box-sizing: border-box; color: rgb(51, 51, 51); display: block; font-family: 'Microsoft YaHei', 宋體, Tahoma, Helvetica, Arial, 宋體, sans-serif; font-size: 12px; height: 172px; line-height: 17px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px; width: 566px;
分別注銷屬性進(jìn)行測(cè)試，當(dāng)注銷到：
.panel-body:after {
clear: both;
}
終于產(chǎn)生效果了，高度正常了。
原來是在這里對(duì)浮動(dòng)進(jìn)行了清除，而清除浮動(dòng)不管位置如何，都重新計(jì)算了原浮動(dòng)元素的高度，并且有種卡在清除浮動(dòng)代碼的這個(gè)位置。
結(jié)論：clear: both;不管位置在那，都會(huì)清除浮動(dòng)，并且重新計(jì)算高度。
由于盡量不破壞bootstrap的代碼包，而對(duì)定義好的.panel-body:after進(jìn)行重寫，是不妥當(dāng)?shù)?，影響了頁面下方的布局?/span>
所以針對(duì)這個(gè)原因的嘗試解決辦法是：
1、笨方法，在開頭放沒有此類清除浮動(dòng)屬性的標(biāo)簽，把這個(gè)距離頂出去，這樣浮動(dòng)的bug就算發(fā)生，也沒有表現(xiàn)了。對(duì)付對(duì)付可以，但實(shí)際使用中這是不現(xiàn)實(shí)的。。。
2、左側(cè)結(jié)尾處增加清除浮動(dòng)標(biāo)簽，清除了會(huì)占據(jù)100%寬度，導(dǎo)致右側(cè)主體內(nèi)容換行。PASS
最后的解決辦法是將左側(cè)的浮動(dòng)轉(zhuǎn)換為絕對(duì)定位，將float:left改寫為position:absolute，問題解決了。遺憾的是這個(gè)解決方案對(duì)于此項(xiàng)目好用，但不一定通用。
描寫這么詳細(xì)，也是希望有遇到、解決同樣問題的朋友能夠分享一下心得與解決方案。
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費(fèi)用，即可穩(wěn)步提升排名至首頁。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。