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

0

最後のHTMLを使用すると、 divを置き忘れthumbnailて完全に削除し、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 に答える