CODEWITHSUNDEEP
twitter-bootstrap
john smith
john smith

Reputation: 93

bootstrap taking extra margin on left for span

I am trying to add Div and Div which comes at bottom has extra margin on 4th span.

4th Span comes at bottom but is not properly aligned. It has more left-padding than above one.

Span4

here are my code :-

<div class="row-fluid">
    <div class=span12>
        <div class=span4>
            <div style="background: url(img/background.jpg) center no-repeat">
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
            </div>
        </div>
        <div class="span4">
            <div style="background: url(img/background.jpg) center no-repeat">
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
            </div>
        </div>
        <div class="span4">
            <div style="background: url(img/background.jpg) center no-repeat">
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
            </div>
        </div>
        <div class="span4">
            <div style="background: url(img/background.jpg) center no-repeat">
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 4439

Answers (2)

Matt Millican
Matt Millican

Reputation: 4054

You need another <div class="row"></div in there, like below:

<div class="row-fluid">
  <div class=span12>
    <div class="row"> <!-- Additional row HERE -->
    <div class=span4>
        <div style="background: url(img/background.jpg) center no-repeat">
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
        </div>
    </div>
    <div class="span4">
        <div style="background: url(img/background.jpg) center no-repeat">
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
        </div>
    </div>
    <div class="span4">
        <div style="background: url(img/background.jpg) center no-repeat">
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
        </div>
    </div>
    </div>
  </div>
  <div class=span12>
    <div class="row">  <!-- Additional row HERE -->
    <div class="span4">
        <div style="background: url(img/background.jpg) center no-repeat">
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
        </div>
    </div>
    </div>
  </div>
</div>

Upvotes: 1

ダミアン ರ_ರ
ダミアン ರ_ರ

Reputation: 72

i think the solution is

<div class="row-fluid">
  <div class=span12>
    <div class=span4>
        <div style="background: url(img/background.jpg) center no-repeat">
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
        </div>
    </div>
    <div class="span4">
        <div style="background: url(img/background.jpg) center no-repeat">
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
        </div>
    </div>
    <div class="span4">
        <div style="background: url(img/background.jpg) center no-repeat">
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
        </div>
    </div>  
  </div>
  <div class=span12>
    <div class="span4">
        <div style="background: url(img/background.jpg) center no-repeat">
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
        </div>
    </div>
  </div>
</div>

this because you complete the grid with 3 span4, in other words, 3*span4 = 12 then, you need create a new div container with span12 and inside of this div you can add new spanN until complete the 12 grid you got it? :)

Upvotes: 0

Related Questions