Bootstrap：`span`/`row`内的`well`超出了它的容器：如何让它“仅”填充宽度=100%的内容？

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

设置为与

div

相同的

span

：http://jsfiddle.net/sebastien_worms/fc42w/3/

我该怎么做才能让

well

填充 100%（仅）

span4

？

Answer 1

这是因为你的衬垫。您可以添加以下内容：

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

它适用于任何现代浏览器，包括 IE8 及更高版本。