Javascript 引导中的一些CSS对齐问题

我正试图将我的产品框对齐，使其看起来像这样：

到目前为止，我所拥有的：

我只是想得到“盒装”区域的结果，但我一辈子都搞不清楚这种对齐方式

我的JS和CSS中也包含了外部资源

HTML格式如下：

<section id="product">
    <div class="container White_BG">
        <aside class="col-md-4">
            <!--Category-->
            <div class="sidewidt2">
                <div class="productprice" id="StandardProductBox">
                    <div id="ItemNumber">
                        <span itemprop="identifier" content="sku:EB06">
                            <p># EB06</p>
                        </span>
                    </div>   
                    <div itemprop="availability" id="StockStatus" content="in_stock">
                        <strong>Out of Stock,</strong>
                        Please call for availability
                    </div>              
                    <p class="prod-det-price">Call for Pricing</p>  
                    <label for="qtyproduct" id="qtylabel">Qty</label>
                    <input id="qtyproduct" type="text" value="1" name="dmilist_Qty_100000060715">
                    <ul class="productpagecart">
                        <li>
                        <span style="position:relative;">
                          <input type="submit" id="DisabledAddToCart" name="Add to Cart" value="ADD TO CART" alt="Add to Cart" style="cursor:not-allowed;" disabled="disabled">
                          <div class="DisabledCart" style="position:absolute; left:0; right:0; top:0; bottom:0; cursor:not-allowed;"></div>
                        </span>
                        <div class="modal fade" id="NotAvailable" tabindex="-1" role="dialog" aria-labelledby="NotAvailableLabel" aria-hidden="true">
                          <div class="modal-dialog">
                            <div class="modal-content">
                              <div class="modal-header">
                                <img class="closeModal" data-dismiss="modal" aria-hidden="true" src="http://cdnll.amleo.com/images/art/x_white.png" height="20" width="20" alt="X">
                                <h4 class="modal-title" id="myModalLabel">Not Available Online</h4>
                              </div>
                              <div class="modal-body">
                                <div class="alert alert-danger"><strong>Not available for online orders. Please call 1-800-543-8995 to order; thank you.</strong></div>
                              </div>                                
                              </div>
                            </div>
                          </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="ShipWeight" id="ShipWeight">
                Weight: 29.80 lbs
            </div>
        </aside>
    </div>
</section>

#EB06

缺货，
请打电话询问是否有空
要求定价
数量


网上没有
不适用于在线订单。请致电1-800-543-8995订购；谢谢。


重量：29.80磅

我不确定您可以调整哪些功能，不可以调整哪些功能，但您可以通过更改标记和类来实现这一点。我将向您展示成品，您必须将标记转换为类似的内容

如果你想让一半的内容拥抱左边，另一半拥抱右边，你应该把它们分开。您可以将一部分向左浮动，另一部分向右浮动（

。在引导中向左拉

和

。向右拉

），但是既然您已经在使用引导，为什么不使用它们的网格系统进行布局呢。这就是它的目的

因此，设置您的购物车项目，并在其中添加一个

.row

，然后使用

.col-xs-6

将内容分成两半。将内容放在每个分区内。右侧分区的内容可以使用

。text right

向右对齐

像这样：

<div class="ItemBox ">
    <div class="row">
        <div class="col-xs-6">
            <b>#EBRO1</b><br/>
            Call for pricing.<br/><br/>
            <label for="qtyInput" >Qty</label>
            <input type="text" id="qtyInput" />
        </div>
        <div class="col-xs-6 text-right">
            <b>Out of Stock,</b><br/>
            Please call for availability <br/><br/>
            <button class="btn btn-default">Add to Cart</button>
        </div>
    </div>
</div>

#EBRO1

要求定价。


数量
缺货，

请致电询问是否有空


添加到购物车

看起来是这样的：

---

您真的应该在容器中使用两列。两者都以内联方式显示。