1

我尝试使用引导程序创建一个侧面菜单和一个项目列表，但我得到一个边距移位错误，看看它是什么样子的。我修改了缩略图 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>
4

2 回答 2

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>
于 2013-08-04T00:02:18.760 回答
0

使用你的最后一个 HTML，你放错了thumbnaildiv，完全删除它并添加到img包装器 div，所以 wrpper 将是span6 thumbnail

这是演示：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>
于 2013-08-04T00:23:06.167 回答