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>

检查了引导程序css后，我可以看到.row首先将左边距向后拉20px，这样每次创建.spanX时，它左边都有一个20px的装订线。这是有道理的，但是如何将样式应用于整行（例如背景颜色）并将其应用于该行中的所有列（在我的示例中为span5和span7）但不包括左手20px排水沟？
其次，设置列中元素宽度的最佳方法是什么？在我的示例中，我尝试通过将文本框放置在具有span5的嵌套行中来调整文本框的大小以填充左侧列的宽度。这在IE7中不起作用 - 相反它向右移动了20px而我失去了右手排水沟。

要看到这一点，请查看IE7中的http://jsfiddle.net/jRcJG/与优秀的浏览器。

我最接近的是将IE浏览器放在一起再次将输入移回，但这会导致其他问题，例如在右栏中压缩输入前置：

http://jsfiddle.net/JsBpV/

不幸的是，我正在开发的项目必须支持IE7，所以我不能忽视这些用户。

感谢您的帮助！

Answer 1

＃2的简单但不一定优雅的解决方案是在类中添加IE星形黑客：

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

使用.span12创建一个div，并在.span5和span7
的jQuery

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

2 个答案: