引导程序：`span`/`row` 中的`well` 超出了它的容器：如何使它填充“仅”宽度 = 100%？答案

【问题标题】：Bootstrap: `well` inside a `span`/`row` goes beyond its container: how to make it fill "only" width=100% of it?引导程序：`span`/`row` 中的`well` 超出了它的容器：如何使它填充“仅”宽度 = 100%？
【发布时间】：2012-10-20 00:03:31
【问题描述】：

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？

【问题讨论】：

标签： css layout html twitter-bootstrap

【解决方案1】：

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

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

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

【讨论】：