Строка внутри bootstrap collapse

Question

Я использую Bootstrap 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>