css - 修复 Bootstrap margin 问题

Question

我尝试使用 bootstrap 创建一个侧边菜单和一个元素列表，但我收到了边距偏移错误，看看它是什么样子。我已经修改了缩略图 html 结构，所以图像会在左边

这是文件的html

<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>

我该如何解决这个问题？

编辑:新 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>

Answer 1

您应该在每个跨度之后放置一个新的流体行。

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

但是，反正有一个没用的span12，直接用这两个span6就可以了:

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