css - Bootstrap : `well` inside a `span` /`row` goes beyond its container: how to make it fill "only" width=100% of it?

Question

我有一个 Bootstrap well 超出其包含元素的问题(这里是一个 class="row" ，它本身在一个 class="span4")。

它在我在这里做的 JSFidle 中清晰可见:http://jsfiddle.net/sebastien_worms/fc42w/2/
全屏:http://jsfiddle.net/sebastien_worms/fc42w/2/embedded/result/

代码摘录在这里:

<div class="span4 pull-right">
    <div class="row">
        <div class="well" style="width:100%;">
            <b>This is the well that bothers me !</b><br> It goes beyond the right end of the screen ... And if you click "inspect element", you can see it goes beyond the right-end of its containing "span4" and "row"...
        </div>
    </div>
</div>

在调整浏览器的窗口大小(最明显的宽度约为 1000 像素)时，您可以看到井超出了其包含元素(和屏幕)。

...显然，我不能将 well 设置在与 span 相同的 div 中:http://jsfiddle.net/sebastien_worms/fc42w/3/

我应该怎么做才能让 well 填充 100%(仅)span4？

Answer 1

这是因为你的填充，只需添加这个

.well {
    box-sizing: border-box;
}

• 它适用于任何现代浏览器和 IE8 及更新版本