ブートストラップの問題のdivがspan - css、twitter-bootstrapの外に広がります

"span"クラスを持つ別のdivの内側にdivがあります。子divの幅は100％に設定されています。何らかの理由でdivが親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>

回答：

あなたを削除する width: 100% あなたの子CSSクラスから。

ブロック要素は自動的にそのコンテナの全幅にレンダリングされます。また手動で設定した場合 width: 100% 〜と padding あなたがしたように、それはのようにレンダリングします 100% + 40px.

.child {
padding: 20px;
}

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

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;
}

スタイルシートの一番上には、どこでも自由に使用できます。