作者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/cn.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