3

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

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

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

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

http://jsfiddle.net/JsBpV/

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

谢谢你的帮助！

4

2 回答 2

2

#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>
于 2012-06-20T10:39:57.640 回答
1
  1. 使用 .span12 创建一个 div，并使用 .span5 和 span7 包含另一个级别的行/跨度
  2. jQuery
于 2012-06-19T16:45:30.460 回答