bootstrap fluid grid：输入在ie7中突破其容器

Question

为什么IE7输入会突破其容器？

http://jsfiddle.net/Q8jPM/2/

<div class="row-fluid" style="margin-top:10px;">
    <div class="span12">
        <div class="row-fluid">
            <div class="span6">
                <div class="row-fluid">
                    <div class="span6 " style="background:green;">
                        <input type="text" class="span12">
                    </div>
                    <div class="span6" style="background:blue;">
                        <input type="text" class="span12">
                    </div>
                </div>
            </div>
            <div class="span6">
                <div class="row-fluid">
                    <div class="span6" style="background:green;">
                        <input type="text" class="span12">
                    </div>
                    <div class="span6" style="background:blue;">
                        <input type="text" class="span12">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

更新：我认为它是盒子模型和宽度问题，但是是否有任何带引导程序的解决方案？

Answer 1

这是因为IE7不支持css属性

box-sizing: border-box;

将填充和边框大小视为元素宽度的一部分。

在此处详细了解此媒体资源：http://paulirish.com/2012/box-sizing-border-box-ftw/

因此，IE7将填充和边框大小添加到输入宽度 - 超出父宽度。您必须将这些设置为0才能使元素适合父级大小并保持流畅。

您可以尝试在输入周围添加包装元素，然后将填充和边框设置为包装器。这适用于所有浏览器

Answer 2

我遇到了类似的问题。我通过替换

解决了这个问题

class="span3"

带

class="input-mini" 

你可以使用输入小或当然适合的任何东西。既然您正在为输入寻找span12，我建议使用“input-xxlarge”