如何在Twitter Bootstrap的网格系统中的列中设置输入的宽度? [英] How do I set the width of inputs within a column in Twitter Bootstrap's grid system?

问题描述

到目前为止，我还是Bootstrap的新手，但是对网格有一些简单的问题-似乎无法在任何地方找到答案...

 < div class ="container">< div class ="row" style ="background-color:#ccc;"><！-1.如何获得该背景色以排除左20px装订线?->< div class ="span5">左上校< div class ="row">< div class ="span5">< input class ="span5" type ="text"/><！-2.如何在IE7中阻止此输入向右移20px?-></div></div></div>< div class ="span7">右上角< div class ="input-prepend"><！-即使在IE7中，这也能正确排列-我的明星黑客将打破这一点->< span class ="add-on"> +</span><输入type ="text"占位符="Add ..." class ="span6"></div></div></div></div> 

1. 检查了引导css后，我可以看到.row通过将左边距向左拉20px开始，因此每次创建.spanX时，它的左边都有20px装订线.这是有道理的，但是如何将样式应用于整个行(例如背景色)，并将样式应用于该行中的所有列(在我的示例中为span5和span7)，但不包括左手20px装订线?p>

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

要查看此信息，请在IE7与优质浏览器中查看 http://jsfiddle.net/jRcJG/

我最接近的是将IE hack放在一起，以再次将输入移回，但这会引起其他问题，例如在右列中压缩输入前缀:

http://jsfiddle.net/JsBpV/

不幸的是，我正在从事的项目必须支持IE7，因此我无法无视这些用户.

感谢您的帮助！

解决方案

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

I'm new to Bootstrap and loving it so far but have a couple of simple questions to do with the grid - can't seem to find the answers anywhere...

<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. Having inspected the bootstrap css I can see that .row starts by pulling back the margin-left by 20px, so that each time a .spanX is created, it has a 20px gutter to the left. This makes sense, but how can I apply style to the whole row (e.g. a background colour) and have this apply to all columns within that row (the span5 and span7 in my example) but without including the left hand 20px gutter?

2. Secondly, what is the best way to set the widths of elements within a column? In my example I have tried to size a textbox to fill the width of the left hand column by placing it in a nested row with span5. This doesn't work in IE7 - instead it moves to the right by 20px and I lose the right hand gutter.

To see this, check out http://jsfiddle.net/jRcJG/ in IE7 vs good browsers.

The closest I've got is to put together an IE hack to shift the inputs back again, but this causes other problems such as squashing up the input-prepend in the right column:

http://jsfiddle.net/JsBpV/

Unfortunately the project I'm working on must support IE7 so I don't have the luxury of ignoring these users.

Thanks for any help!

解决方案

1. Create a div with .span12 and include another level of row/span with your .span5 and span7
2. jQuery

这篇关于如何在Twitter Bootstrap的网格系统中的列中设置输入的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！