Question

我尝试使用bootstrap创建一个侧面菜单和一个项目列表，但是我得到了一个边缘移位错误，看看它是什么样的。我修改了thumnail html结构，因此图像位于左侧

bootstrap error position

这是文件的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>

Answer 2

使用您的上一个HTML，您错过了thumbnail div，将其完全删除并添加到img包装器div中，因此wrpper将为span6 thumbnail

这是DEMO：http://jsfiddle.net/balexandre/dj3AW/

和代码：

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

修复bootstrap保证金问题

2 个答案: