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

看板Web_Design作者 (瞇)時間11年前 (2014/09/09 10:18), 11年前編輯推噓3(3016)
留言19則, 2人參與, 最新討論串1/1
問題如下: 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

09/09 12:21, , 1F
09/09 12:21, 1F

09/09 12:22, , 2F
順帶一提,您左右不分阿...
09/09 12:22, 2F

09/09 12:29, , 3F
position:relative; 可以被內容撐開,而且又能被定位
09/09 12:29, 3F
您好像誤會我的意思了 我意思是右欄的Bootstrap panel明明內容只有一行 為什麼它的長度卻是隨著我左欄的長度在變 另外您在右欄加的那3個div當然正常,因為它不是Bootstrap內容 您可以在第一個div加上class="row"看看,就會被撐大了 我重新檢查了一下文章,我左右沒寫反啊XD ※ 編輯: mingming5596 (118.163.184.193), 09/10/2014 08:46:09

09/10 11:39, , 4F
因為panel 的 clear hack 會被左欄的 float 推開
09/10 11:39, 4F

09/10 11:45, , 5F
另外,別在bootstrap的非文字容器中放其他元素,因為bo
09/10 11:45, 5F

09/10 11:45, , 6F
otstrap動了很多margin 跟padding互相抵消,如果你塞
09/10 11:45, 6F

09/10 11:45, , 7F
自己的元素進去,那一定會亂掉的
09/10 11:45, 7F

09/10 11:56, , 8F
雖然自己修css還是能修得好,但我不覺得那是bootstrap
09/10 11:56, 8F

09/10 11:57, , 9F
的正確用法
09/10 11:57, 9F

09/10 11:59, , 10F
沒記錯的話grid system那一些class都有動margin padding
09/10 11:59, 10F

09/10 12:00, , 11F
row也是,所以你擺classs="row"才會噴出去
09/10 12:00, 11F

09/10 12:02, , 12F
原來是Bootstrap本身clear hack的問題, 所以一定得加上absolute讓它脫離出來不被左邊的浮動影響到嗎? 長知識了,謝謝解答哦! ※ 編輯: mingming5596 (118.163.184.193), 09/10/2014 17:12:40

09/10 22:48, , 13F
痾...重點不在absolute,而是/5/沒用到float阿
09/10 22:48, 13F

09/12 01:48, , 14F
用dev tools看如你所講的是before跟after的display:
09/12 01:48, 14F

09/12 01:49, , 15F
table搞鬼,因為把他關掉問題就解決了,你利用css
09/12 01:49, 15F

09/12 01:49, , 16F
Specific的特性,把他的display屬性蓋過去就好了
09/12 01:49, 16F

09/12 19:21, , 17F
問題在於clear:both http://jsfiddle.net/jogkakpv/6/
09/12 19:21, 17F

09/12 19:23, , 18F
那個是為了在沒非浮動內容物時撐開高度用的
09/12 19:23, 18F

09/12 19:23, , 19F
可是在這裡反而會造成問題
09/12 19:23, 19F
文章代碼(AID): #1K3cE1T1 (Web_Design)