부트 스트랩 여백 문제 수정

Question

부트 스트랩을 사용하여 사이드 메뉴 및 항목 목록을 만들려고 시도했지만 마진 변경 오류가 발생합니다. 이미지가

<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 해결합니까되고 왼쪽

이에있을 것이다, 그래서 나는 thumnail의 HTML 구조를 수정?

편집 : 새 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 사용할 수 있습니다 마지막으로 HTML을 사용하여

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

Answer 2

을, 당신은 thumbnail 사업부를 missplacing하는, 완전히 제거하고 추가 img wraper의 사업부는, 그래서 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>