2013-08-29 72 views
0

對於包含帶有一行的手風琴元素的網站,我使用的是Bootstrap 2.3.2。 Accordion是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

如果我把該行手風琴元素之外的一切看起來完美。

回答

3

這與手風琴和.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> 
+0

謝謝,它的工作原理。我應該爲每2個「offer」元素添加一行嗎?這些優惠將有6-7個。 – ivica

+0

是的,每個span12有1行,所以2 x span6,3 x span4等等。如果你只有一個span6,那麼OK :)。 –