作者mingming5596 (瞇)
看板Web_Design
標題[請益] float後Bootstrap的高會100%的問題
時間Tue Sep 9 10:18:36 2014
問題如下：
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://webptt.com/m.aspx?n=bbs/Web_Design/M.1410229121.A.741.html
2F：→ mmis1000: 順帶一提，您左右不分阿... 09/09 12:22
3F：→ mmis1000: position:relative; 可以被內容撐開，而且又能被定位 09/09 12:29
您好像誤會我的意思了 我意思是右欄的Bootstrap panel明明內容只有一行
為什麼它的長度卻是隨著我左欄的長度在變
另外您在右欄加的那3個div當然正常，因為它不是Bootstrap內容
您可以在第一個div加上class="row"看看，就會被撐大了
我重新檢查了一下文章，我左右沒寫反啊XD
※ 編輯: mingming5596 (118.163.184.193), 09/10/2014 08:46:09
4F：推 mmis1000: 因為panel 的 clear hack 會被左欄的 float 推開 09/10 11:39
5F：推 mmis1000: 另外，別在bootstrap的非文字容器中放其他元素，因為bo 09/10 11:45
6F：→ mmis1000: otstrap動了很多margin 跟padding互相抵消，如果你塞 09/10 11:45
7F：→ mmis1000: 自己的元素進去，那一定會亂掉的 09/10 11:45
8F：→ mmis1000: 雖然自己修css還是能修得好，但我不覺得那是bootstrap 09/10 11:56
9F：→ mmis1000: 的正確用法 09/10 11:57
10F：→ mmis1000: 沒記錯的話grid system那一些class都有動margin padding 09/10 11:59
11F：→ mmis1000: row也是，所以你擺classs="row"才會噴出去 09/10 12:00
原來是Bootstrap本身clear hack的問題，
所以一定得加上absolute讓它脫離出來不被左邊的浮動影響到嗎?
長知識了，謝謝解答哦！
※ 編輯: mingming5596 (118.163.184.193), 09/10/2014 17:12:40
13F：→ mmis1000: 痾...重點不在absolute，而是/5/沒用到float阿 09/10 22:48
14F：推 iamnodoubt: 用dev tools看如你所講的是before跟after的display: 09/12 01:48
15F：→ iamnodoubt: table搞鬼,因為把他關掉問題就解決了,你利用css 09/12 01:49
16F：→ iamnodoubt: Specific的特性,把他的display屬性蓋過去就好了 09/12 01:49
18F：→ mmis1000: 那個是為了在沒非浮動內容物時撐開高度用的 09/12 19:23
19F：→ mmis1000: 可是在這裡反而會造成問題 09/12 19:23