java - Bootstrap 追加 div

Question

我是 bootstrap 的新手，我正在尝试附加这些破折号单元，以便它们可以在一个小学校元素中并排显示。

示例:dash-unit <-- dash unit <-- dash unit <-- 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 »