CODEWITHSUNDEEP
csstwitter-bootstrap
Smith
Smith

Reputation: 5951

fix bootstrap margin issue

I try to create a side menu and an items list with bootstrap, but i get a margine shift error see what it looks like. I have modified the thumnail html structure so the image would be at the left

bootstrap error position

this is the html of the file

<div class="row-fluid">
    <!-- LEFT SIDE CATEGORIES-->
    <div class="span3">
      <div class="well" >
        <ul id="cat-navi" class="nav nav-list">
          <li class="nav-header">Shop by Product</li>
          <li class="active"><a href="#">Active category</a></li>
          <li><a href="#">New in: Category</a></li>
        </ul>
      </div>
      <!-- /well-->
    </div>
    <!-- /left SIDE-->
    <!-- CONTENT SIDE-->
    <div id="fixthis" class="span9">
      <div class="row-fluid articles-grid">
        <!-- ITEM -->
        <div class="thumbnail span12">
          <!-- IMAGE CONTAINER-->
          <div class="span6"> <img src="images/thumb.jpg" alt="post image" /> </div>
          <!--END IMAGE CONTAINER-->
          <!-- CAPTION -->
          <div class="span6">
            <div class="caption">
              <h3 class="">Featured product title</h3>
              <p class="">This project presents beautiful style graphic &amp; design. Bootstraptor provides modern features</p>
              <p> <a class="" href="#" title="">Read more &rarr;</a> </p>
            </div>
          </div>
          <!--END CAPTION -->
        </div>
        <!-- END ITEM -->
        <!-- ITEM -->
        <div class="thumbnail span12">
          <!-- IMAGE CONTAINER-->
          <div class="span6"> <img src="images/thumb.jpg" alt="post image" /> </div>
          <!--END IMAGE CONTAINER-->
          <!-- CAPTION -->
          <div class="span6">
            <div class="caption">
              <h3 class="">Featured product title</h3>
              <p class="">This project presents beautiful style graphic &amp; design. Bootstraptor provides modern features</p>
              <p> <a class="" href="#" title="">Read more &rarr;</a> </p>
            </div>
          </div>
          <!--END CAPTION -->
        </div>
        <!-- END ITEM -->
      </div>

      <div class="row-fluid">
        <div class="well">
          <div class="row-fluid">
            <div class="span8">
              <p class="lead text-center"> YOUR RECENT MARKETING SLOGAN OR OFFER! </p>
            </div>
            <div class="span4"> <a class="btn btn-warning btn-large btn-block" href="#">BUY NOW!</a> </div>
          </div>
        </div>
      </div>

    </div>
    <!-- /CONTENT SIDE-->
  </div>

how do i fix this?

Edit: New html

<div class="row-fluid">
    <div class="span12">
        <div class="row-fluid">
            <div class="thumbnail">
          <!-- IMAGE CONTAINER-->
          <div class="span6"> <img src="images/thumb.jpg" alt="post image" /> </div>
          <!--END IMAGE CONTAINER-->
          <!-- CAPTION -->
          <div class="span6">
            <div class="caption">
              <h3 class="">Featured product title</h3>
              <p class="">This project presents beautiful style graphic &amp; design. Bootstraptor provides modern features</p>
              <p> <a class="" href="#" title="">Read more &rarr;</a> </p>
            </div>
          </div>
          <!--END CAPTION -->
        </div>
        </div>
        <div class="row-fluid">
            <div class="thumbnail">
          <!-- IMAGE CONTAINER-->
          <div class="span6"> <img src="images/thumb.jpg" alt="post image" /> </div>
          <!--END IMAGE CONTAINER-->
          <!-- CAPTION -->
          <div class="span6">
            <div class="caption">
              <h3 class="">Featured product title</h3>
              <p class="">This project presents beautiful style graphic &amp; design. Bootstraptor provides modern features</p>
              <p> <a class="" href="#" title="">Read more &rarr;</a> </p>
            </div>
          </div>
          <!--END CAPTION -->
        </div>
        </div>

    </div>
</div>

Upvotes: 1

Views: 2939

Answers (2)

balexandre
balexandre

Reputation: 75073

using your last HTML, you are missplacing the thumbnail div, remove it completely and add to the img wraper div, so the wrpper would be span6 thumbnail

here's the DEMO: http://jsfiddle.net/balexandre/dj3AW/

and the code:

<div class="row-fluid">

    <!-- LEFT SIDE -->
    <div class="span3">
        <div class="well" >
            <ul id="cat-navi" class="nav nav-list">
                <li class="nav-header">Shop by Product</li>
                <li class="active"><a href="#">Active category</a></li>
                <li><a href="#">New in: Category</a></li>
            </ul>
        </div>
        <!-- /well-->
    </div>

    <!-- RIGHT SIDE -->
    <div class="span9">
        <div class="row-fluid">
            <div class="span12">

                <!-- 1st ROW -->

                <div class="row-fluid">

                    <!-- IMAGE CONTAINER-->
                    <div class="span6 thumbnail">
                        IMG
                    </div>
                    <!--END IMAGE CONTAINER-->

                    <!-- CAPTION -->
                    <div class="span6">
                        <div class="caption">
                            <h3 class="">Featured product title</h3>
                            <p class="">This project presents beautiful style graphic &amp; design. Bootstraptor provides modern features</p>
                            <p> <a class="" href="#" title="">Read more &rarr;</a> </p>
                        </div>
                    </div>
                    <!--END CAPTION -->

                </div>

                <!-- 2nd ROW -->

                <div class="row-fluid">

                    <!-- IMAGE CONTAINER-->
                    <div class="span6 thumbnail">
                        IMG
                    </div>
                    <!--END IMAGE CONTAINER-->

                    <!-- CAPTION -->
                    <div class="span6">
                        <div class="caption">
                            <h3 class="">Featured product title</h3>
                            <p class="">This project presents beautiful style graphic &amp; design. Bootstraptor provides modern features</p>
                            <p> <a class="" href="#" title="">Read more &rarr;</a> </p>
                        </div>
                    </div>
                    <!--END CAPTION -->

                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

n1xx1
n1xx1

Reputation: 2076

You are supposed to put a new fluid row after every span.

<div class="row-fluid">
    <div class="span12">
        <div class="row-fluid">
            <div class="span6">
                 <!-- content -->
            </div>
            <div class="span6">
                 <!-- content -->
            </div>
        </div>
    </div>
</div>

But, anyway there is an useless span12, you can just directly use the two span6:

<div class="row-fluid">
    <div class="span6">
         <!-- content -->
    </div>
    <div class="span6">
         <!-- content -->
    </div>
</div>

Upvotes: 1

Related Questions