[請益] float後Bootstrap的高會100%的問題

[mingming5596 (瞇)]

問題如下：

http://jsfiddle.net/jogkakpv/

請教各位

我現在要做一個兩欄式的排版

左欄固定寬度200px，右欄填滿剩餘空間

右欄裡面的內容使用Bootstrap

但是現在問題來了

右欄的第一個Bootstrap內容好像會隨著左欄的高度在變

研究了很久發現好像是Bootstrap的before跟after有設display: table的關係

拿掉就正常，但如果再往上放<div class="row">之類的整個版面都重疊了

請看附圖http://i.imgur.com/dWD4BAA.jpg

請問各位有遇過類似的問題嗎，在不修改Bootstrap css的前提下有解決的方法嗎？



ps.有用過左欄就用position:absolute去固定，但如果選單一多就無法...因為脫離了文
檔流...

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.163.184.193
※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1410229121.A.741.html
→ mmis1000: http://jsfiddle.net/jogkakpv/4/ 這樣？
→ mmis1000: 順帶一提，您左右不分阿...
→ mmis1000: position:relative; 可以被內容撐開，而且又能被定位
您好像誤會我的意思了 我意思是右欄的Bootstrap panel明明內容只有一行
為什麼它的長度卻是隨著我左欄的長度在變
另外您在右欄加的那3個div當然正常，因為它不是Bootstrap內容
您可以在第一個div加上class="row"看看，就會被撐大了
我重新檢查了一下文章，我左右沒寫反啊XD
※ 編輯: mingming5596 (118.163.184.193), 09/10/2014 08:46:09
推 mmis1000: 因為panel 的 clear hack 會被左欄的 float 推開
推 mmis1000: 另外，別在bootstrap的非文字容器中放其他元素，因為bo
→ mmis1000: otstrap動了很多margin 跟padding互相抵消，如果你塞
→ mmis1000: 自己的元素進去，那一定會亂掉的
→ mmis1000: 雖然自己修css還是能修得好，但我不覺得那是bootstrap
→ mmis1000: 的正確用法
→ mmis1000: 沒記錯的話grid system那一些class都有動margin padding
→ mmis1000: row也是，所以你擺classs="row"才會噴出去
→ mmis1000: http://jsfiddle.net/jogkakpv/5/
原來是Bootstrap本身clear hack的問題，
所以一定得加上absolute讓它脫離出來不被左邊的浮動影響到嗎?
長知識了，謝謝解答哦！
※ 編輯: mingming5596 (118.163.184.193), 09/10/2014 17:12:40
→ mmis1000: 痾...重點不在absolute，而是/5/沒用到float阿
推 iamnodoubt: 用dev tools看如你所講的是before跟after的display:
→ iamnodoubt: table搞鬼,因為把他關掉問題就解決了,你利用css
→ iamnodoubt: Specific的特性,把他的display屬性蓋過去就好了
→ mmis1000: 問題在於clear:both http://jsfiddle.net/jogkakpv/6/
→ mmis1000: 那個是為了在沒非浮動內容物時撐開高度用的
→ mmis1000: 可是在這裡反而會造成問題