如何在 Twitter Bootstrap 的网格系统中设置列内的输入宽度？

Question

我是 Bootstrap 的新手，到目前为止我很喜欢它，但是有几个与网格有关的简单问题 - 似乎无法在任何地方找到答案...

<div class="container">
    <div class="row" style="background-color: #ccc;"> <!-- 1. How do I get this background colour to exclude the left 20px gutter? -->

        <div class="span5">
            Left Col

            <div class="row">
                <div class="span5">
                    <input class="span5" type="text"/> <!-- 2. How do I stop this input from shifting right 20px in IE7? -->
                </div>
            </div>

        </div>

        <div class="span7">
            Right Col

            <div class="input-prepend">
                <!-- This lines up correctly, even in IE7 - my star hack will break this -->
                <span class="add-on">+</span><input type="text" placeholder="Add..." class="span6">
            </div>
        </div>
    </div>
</div>

1. 检查 bootstrap css 后，我可以看到 .row 开始时将 margin-left 拉回 20px，因此每次创建 .spanX 时，它的左侧都有一个 20px 的间距。这是有道理的，但是我如何将样式应用于整行（例如背景颜色）并将其应用于该行中的所有列（在我的示例中为 span5 和 span7），但不包括左侧 20px 排水沟？

2. 其次，设置列内元素宽度的最佳方法是什么？在我的示例中，我尝试通过将文本框放置在带有 span5 的嵌套行中来调整文本框的大小以填充左侧列的宽度。这在 IE7 中不起作用 - 而是向右移动 20 像素，我失去了右手边沟。

要查看此内容，请查看http://jsfiddle.net/jRcJG/ 在 IE7 与良好浏览器中的对比。

我最接近的方法是组合一个 IE hack 以再次将输入移回，但这会导致其他问题，例如压缩右列中的输入前置：

http://jsfiddle.net/JsBpV/

不幸的是，我正在做的项目必须支持 IE7，所以我没有忽略这些用户的奢侈。

感谢您的帮助！

Answer 1

#2 的一个简单但不一定优雅的解决方案是在一个类中添加一个 IE star hack：

input.ie-fix-left, textarea.ie-fix-left {
    *margin-left: -20px;
}

这要求您在受此问题影响的每个输入元素上放置一个类：

<div class="row">
    <div class="span6">
        <input type="text" class="span6 ie-fix-left"/>
    </div>
</div>

Answer 2

1. 使用 .span12 创建一个 div，并使用 .span5 和 span7 包含另一个级别的行/跨度
2. jQuery