Geek Answers Handbook

How to register in the liquid line in twitter bootstrap

<div class="internal-wrapper row-fluid"> <div class="Header span12"> <div class="HeaderTitle span6"></div> <div class="span6"></div> </div> </div>

Now, when I fill the inner shell, I expect that the gasket will affect the entire grid! inside of it. But overflow occurs (I think correct filling does not work)

 .internal-wrapper { padding-left: 30px; padding-right: 30px; }

enter image description here

The blue bar below represents the Header class. The green box is a gasket! So this happens on the left, but not right

+7
source share
2 answers

.row-fluid - 100% width. Since it uses a frame layout, any add you add is added to this 100%. See http://paulirish.com/2012/box-sizing-border-box-ftw/ . However, installing it to use the content model may cause other problems in Bootstrap.

How to fix it - add an internal element with the addition.

 <div class="row-fluid"> <div style="padding-left: 30px; padding-right: 30px;"> ... </div> </div>
+16
source

I don’t see (or distinguish) from your message what is wrong, but here is my hunch: adding an addition to an element whose size is Bootstrap, you changed its width. Instead, try putting a marker in .Header.

If this does not help, create a demo: http://jsfiddle.net/

0
source

More articles:


All Articles