부트 스트랩 붕괴 내부 행

Question

한 줄로 된 아코디언 요소가 포함 된 웹 사이트에 부트 스트랩 2.3.2를 사용하고 있습니다. 아코디언은 span6이며 행에 두 개의 span3 요소가 포함될 수 있지만 예상 할 수는 없다고 예상했습니다. 여기에 내 코드를 단순화 :

<div class="span6"> 
    <div class="accordion" id="accordion2"> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
        <p><h3>Some text here</h3></p> 
       </a> 
      </div> 
      <div id="collapseOne" class="accordion-body collapse"> 
       <div class="accordion-inner"> 
        <div class="row"> 
         <br /> 
         <div class="span3 offer"> 
          <div class="offer-wrap"> 
           This one should be on the left 
          </div> 
         </div> 
         <div class="span3 offer"> 
          <div class="offer-wrap"> 
           This one should be on the right, but is BELOW 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

내가하지만 단지 내 화면 크기에서 작동 성가신 CSS의 손보는과, 그들이 서로 옆에 표시 할 수 있었다.

예상되는 동작 : http://imgur.com/O1z4mZN 실제 결과는 : 나는 아코디언 요소 이외의 해당 행을 넣으면 http://imgur.com/fP568Tl

모든 것을 완벽 보인다.

Answer 1

이것은 아코디언 및 .span 클래스의 여백과 관련이 있습니다.

팁 : 절대 .row 클래스를 사용하지 말고 항상 .row-fluid 클래스를 사용하십시오. .row-fluid을 사용하면 사용 가능한 너비를 항상 12 개의 열로 나눌 수 있습니다.

<div class="span6"> 
    <div class="accordion" id="accordion2"> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
        <p><h3>Some text here</h3></p> 
       </a> 
      </div> 
      <div id="collapseOne" class="accordion-body collapse"> 
       <div class="accordion-inner"> 
        <br /> 
        <div class="row-fluid"> 
         <div class="span6 offer"> 
          <div class="offer-wrap"> 
           This one should be on the left 
          </div> 
         </div> 
         <div class="span6 offer"> 
          <div class="offer-wrap"> 
           This one should be on the right, but is BELOW 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>