CODEWITHSUNDEEP
htmltwitter-bootstrappadding
bryanlewis
bryanlewis

Reputation: 569

Twitter bootstrap padding issue

I can't figure out why my navigation at the bottom of this page ("prev" and "next" links) are longer than my #bloglist post teaser that are above width wise. I'm using twitter bootstrap out of the box and am using the scaffolding that they offer.

http://www.b-lew.me/page/3/

any thoughts or suggestions would be much appreciated!

Upvotes: 0

Views: 1237

Answers (2)

Sherbrow
Sherbrow

Reputation: 17379

There are some markup inconsistencies :

  • Each of your rows should be a .row containing a .span12 (and you won't need your .margin-left class)
  • Almost everything is floating, and float: left elements will not fill their container to their right
  • clear: both is not needed, just use the .clearfix class for the container, but you usually won't need it

Here is the markup I tried :

<div class="container">
    <div class="row">
        <div class="span12">
            <div class="well bloglist clearfix">
                <!-- etc -->
            </div>
        </div>
    </div>
</div>

And for the css

.bloglist should not be floating left.

It appears that there is a lot of residual markup from another design, and IMHO you are going to have a lot more graphic bugs if you don't stick to the proper bootstrap architecture.

Upvotes: 1

DVG
DVG

Reputation: 17470

It appears you are expecting the overall size to be span12, evidenced by </div><!-- /span12 --> However! You do not have this class declared in the opening block anywhere, and your bloglist items are span4 and span7, so the overall size would be span11. I edited a bloglist item to be span4/8, which seemed to align with the pager. I would revist your opening markup to get it to the expected size

Upvotes: 0

Related Questions