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扩展超出范围

回答

相关问题