作者aa1235561 (的客)
看板Web_Design
標題[請益] bootstrap
時間Wed Nov 16 14:18:01 2016
各位大大您好，小弟最近使用了bootstrap的grid，然後再快樂的建置中，為了要使用
________ ________ ________
| || || |
| || || |
|div || div || div |
|col-md-4||col-md-4||col-md-4|
| || || |
|________||________||________|
這樣的排版，但其實為了要讓它裡面有padding所以他們是套著一層class = col-md-4的div，然後再去做裡面的內容，但裡面的內容想要做grid，卻發現外層的div的height會變成0，巢狀的grid是沒辦法被使用的，還是有其他的解決方法嗎?
_______________
|div = col-md-4 |
|height=0 |
| _____________ |
||section ||
||=col-md-12 ||
|| ||
|| ||
||_____________||
|_______________|
在chrome中的element的欄會看到這個問題，拿掉section的col-md-12就又正常了！請各位大大解惑，感謝感謝再感謝
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.124.249.107
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1479277083.A.A2B.html
1F：→ kevinkung: 貼程式碼上來看會比較清楚 11/16 18:51
<div class="col-md-12">
<section cls="col-md-6">
<p>外層的section height = 0</p>
<p>但內層的p有高度</p>
</section>
</div>
※ 編輯: aa1235561 (140.124.249.101), 11/17/2016 10:56:57
2F：→ xdraculax: 中間加個 .row 看看 11/17 19:49
3F：→ xdraculax: div.col-sm-12 > div.row > section.col-sm-6 11/17 19:51
4F：→ frostyjoan: .col-*都有float:left，要記得clear，可以像x大說的加 11/18 01:26
5F：→ frostyjoan: 一層.row（bootstrap有在此class清浮動），或是自己 11/18 01:26
6F：→ frostyjoan: 手動對div clear，或是div加上.clearfix（bootstrap清 11/18 01:26
7F：→ frostyjoan: 浮動的class） 11/18 01:26
8F：→ aa1235561: 各位大大可以了！加了row之後世界太平!!!! 11/18 22:13
9F：→ frostyjoan: 建議你去看一下float，不然未來還是有可能遇到問題卻 11/19 09:46
10F：→ frostyjoan: 怎樣都找不到 11/19 09:46
11F：→ aa1235561: 我float都有做clear,加了.row就都沒事了！ 11/19 16:10
12F：→ frostyjoan: 會出現height: 0幾乎都是float沒清到，但奇怪，我認真 11/19 17:08
13F：→ frostyjoan: 照你的圖解或程式碼試，都不會height: 0阿 11/19 17:08
14F：→ aa1235561: 我使用的是chrome，會不會是我加了什麼外掛改變到了? 11/20 00:59