Bootstrap問題div擴展超出範圍

我有一個div在「span」類的另一個div內。子div的寬度設置爲100％。出於某種原因，div在父div之外流動。Bootstrap問題div擴展超出範圍

向父級添加「overflow：hidden」僅切割子div的內容。

有人會知道這個解決方案嗎？下面

.span8 { 
float: none; 
display: block; 
width: 100%; 
margin-left: 0; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 

.child { 
padding: 20px; 
width: 100%; 
} 

<div class="span8 clearfix"> 
    <div class="child"> 
     My content  
    </div> 
</div>

來源

2013-08-29 brandozz

內部div是否有任何填充？如果是這樣，你應該知道寬度試圖確保「無襯墊」空間，任何填充或邊框都會導致div大小增加，最終溢出。 width：auto在div上應該使它儘可能多的使用空間而不會溢出。 – cernunnos

'div'是一個'block element'，不應該放在'span'裏面，這是'inline element'。這不是標準的，會讓你感到困難。 – Itay

跨度或div內的div？ Div是一個塊元素。你應該顯示一些代碼？ – Arpit

代碼從您的孩子CSS類中刪除width: 100%。

塊元素會自動呈現其容器的全部寬度。此外，如果您像以前那樣手動將width: 100%設爲padding，則會呈現如100% + 40px。

.child { 
    padding: 20px; 
} 

<div class="span8 clearfix"> 
    <div class="child"> 
     My content  
    </div> 
</div>

來源

2013-08-29 15:43:36 Itay

我想我發現了這個問題。我正在與引導跨度寬度作鬥爭。我向span8中添加了一個類，然後將寬度設置爲100％，就像這樣「.row-fluid .myclass {width：100％}」 – brandozz

我不太明白你做了什麼，但是再次給出一個塊元素'寬度：100％'不可取...我的解決方案有效。 – Itay

除非你支持IE7中，邊界框（http://www.paulirish.com/2012/box-sizing-border-box-ftw/）計算大小的方法似乎更容易一點（少責任推你做數學題）。如果您將：

* { margin:0; padding:0;  
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
}

在您的樣式表頂部，您可以隨意在任何地方使用它。

來源

2013-08-29 15:47:42 Adam

Bootstrap問題div擴展超出範圍

回答

相關問題