Bootstrap append div



我是引导程序的新手,我正在尝试附加这些破折号单位,以便它们在一个小学校项目中并排显示。

示例:破折号单位 <</p> -- 破折号单位 <-- 破折号单位 <-- 破折号单位

他们互相依偎。但是我不知道如何从左侧附加它们。

父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>

看起来您正在加载每个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如何使用其网格系统的一些信息:

引导网格系统信息 »

最新更新