Note that there are some explanatory texts on larger screens.

plurals
  1. POAdding borders to span divs in Bootstrap messes up layout
    primarykey
    data
    text
    <p>I am starting with Twitter Bootstrap and have a question about how layout functions in it. Here is the HTML:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Bootstrap Test&lt;/title&gt; &lt;link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /&gt; &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt; &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; &lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="container"&gt; &lt;div class="row"&gt; &lt;div class="span4"&gt;a&lt;/div&gt; &lt;div class="span8"&gt;b&lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="span12"&gt;c&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>style.css:</p> <pre><code>div.container { background-color:#aaa; } div.span4, div.span8, div.span12 { background-color:#eee; border: 1px solid #888; border-radius:3px; } </code></pre> <p>Adding border to span4 and span8 increases their width and I end up with this:</p> <p><img src="https://i.stack.imgur.com/jj1CW.jpg" alt="bootstrap span layout"></p> <p>span4 and span8 get stacked while they should be on the same line. I realize I could decrease their width in my .css file and correct this, or use this:</p> <p><a href="http://paulirish.com/2012/box-sizing-border-box-ftw/">http://paulirish.com/2012/box-sizing-border-box-ftw/</a></p> <p>but does Bootstrap provide means to correct this (not adding extra CSS every time I add or remove border, etc)</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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