Question

我是bootstrap的新手，我正试图附加这些仪表单元，以便它们在一个小小的学校项目中并排显示。

示例：dash-unit＆lt; - dash unit＆lt; - dash unit＆lt; - dash-unit

他们在彼此之下探视他们。但我无法弄清楚如何从左边追加它们。

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

Answer 1

您似乎正在使用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如何使用它的网格系统的一些信息：

Bootstrap Grid System Information »

Bootstrap追加div

1 个答案: