2016-03-03 47 views
2

我是bootstrap的新手,我試圖追加這些短跑單元,讓他們在一個小小的學校項目中並排顯示。Bootstrap append div

實施例:劃線單元< - 短劃線單元< - 短劃線單元< - 劃線單元

其中insted的appread下海誓山盟。但我無法弄清楚如何從左邊追加它們。

父div是一個盒子主題。

這是一張圖片和一些代碼。

http://postimg.org/image/qql0uscad/6e57fd76/

<div class="container"> 
<div class="box theme well"> 
<div id="itemListing"> 
    <c:forEach items="#{product.allItems}" var="productItem" > 

       <div class="container">     
        <div class="dash-unit col-sm-2">        
         <div style="color: lightskyblue; margin: 4px; ">#{productItem.title}</div> 
         <hr style="color: white;" /> 
         <img src="#{product.IMG_URL}#{productItem.img_url}" /> 
         <br/> 
         <br/> 
         Genre: #{productItem.genre} 
         <br/> 
         Tillverkare: #{productItem.manufacturer} 
         <br/> 
         Pris: #{productItem.price} 
         <br/> 
         <br/> 
         <div style="color: greenyellow;">Lagersaldo: #{productItem.quantity}</div> 
        </div> 
       </div> 

    </c:forEach> 
</div> 
</div> 
</div> 

回答

2

看起來好像你每次加載與dash-unit一個.container。如果是這樣的話請嘗試以下操作:

<div class="container"> 
<div class="box theme well"> 
<div id="itemListing"> 
    <c:forEach items="#{product.allItems}" var="productItem" > 

       <!--/ Removed the ".container" wrapping --> 

       <div class="dash-unit col-sm-2">        
        <div style="color: lightskyblue; margin: 4px; ">#{productItem.title}</div> 
        <hr style="color: white;" /> 
        <img src="#{product.IMG_URL}#{productItem.img_url}" /> 
        <br/> 
        <br/> 
        Genre: #{productItem.genre} 
        <br/> 
        Tillverkare: #{productItem.manufacturer} 
        <br/> 
        Pris: #{productItem.price} 
        <br/> 
        <br/> 
        <div style="color: greenyellow;">Lagersaldo: #{productItem.quantity}</div> 
       </div> 


    </c:forEach> 
</div> 
</div> 
</div> 

這裏是一個引導程序是如何使用它的網格系統的少量信息:

Bootstrap Grid System Information »

+0

它非常完美,非常感謝你! =) – Henkolicious

+0

很高興它的竅門@Henkolicious&沒問題開心幫忙! – tohood87