Bootstrap issue div расширяется за пределами диапазона

У меня есть div внутри другого div с классом «span». У дочернего div ширина равна 100%. По какой-то причине div течет вне родительского div.Bootstrap issue div расширяется за пределами диапазона

Добавление «переполнения: скрытый» к родительскому объекту разрешает только контент дочернего 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» является «блочным элементом» и не должен находиться внутри 'span', который является« встроенным элементом ». Это не является стандартом и вызовет у вас проблемы. – Itay

Div внутри пролета или div? Div является блочным элементом. Вы должны показать какой-то код? – Arpit

Удалите width: 100% из вашего класса ребенок CSS.

Элементы блока автоматически отображаются на всю ширину их контейнера. Кроме того, когда вы вручную установили 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 issue div расширяется за пределами диапазона

ответ

Смежные вопросы