Databases
StackOverflow2013
Postsdbo
POHow do I set the width of inputs within a column in Twitter Bootstrap's grid system?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I set the width of inputs within a column in Twitter Bootstrap's grid system?
    text
    copied!<p>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...</p> <pre><code>&lt;div class="container"&gt; &lt;div class="row" style="background-color: #ccc;"&gt; &lt;!-- 1. How do I get this background colour to exclude the left 20px gutter? --&gt; &lt;div class="span5"&gt; Left Col &lt;div class="row"&gt; &lt;div class="span5"&gt; &lt;input class="span5" type="text"/&gt; &lt;!-- 2. How do I stop this input from shifting right 20px in IE7? --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="span7"&gt; Right Col &lt;div class="input-prepend"&gt; &lt;!-- This lines up correctly, even in IE7 - my star hack will break this --&gt; &lt;span class="add-on"&gt;+&lt;/span&gt;&lt;input type="text" placeholder="Add..." class="span6"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <ol> <li><p>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?</p></li> <li><p>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.</p></li> </ol> <p>To see this, check out <a href="http://jsfiddle.net/jRcJG/" rel="nofollow">http://jsfiddle.net/jRcJG/</a> in IE7 vs good browsers.</p> <p>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:</p> <p><a href="http://jsfiddle.net/JsBpV/" rel="nofollow">http://jsfiddle.net/JsBpV/</a></p> <p>Unfortunately the project I'm working on must support IE7 so I don't have the luxury of ignoring these users.</p> <p>Thanks for any help!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload