一些CSS对齐问题与bootstrap

Question

我试图将我的产品包装盒看起来像这样：

到目前为止我所拥有的：

jsFiddle

我只是想获得＆＃34;盒装＆＃34;的结果。区域，但我不能为我的生活找出这种对齐方式。

我已将所有外部资源包含在我的JS＆amp; 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>

Answer 1

我不确定你有什么调整能力和你不能调整的能力，但你可以通过改变标记和类来做到这一点。我会告诉你成品，你必须努力将你的标记转换成这样的东西。

如果你想要一半的内容拥抱左边，另一半拥抱右边，你应该把每个内容分开。您可以将一个部分向左浮动，另一个部分向右浮动（.pull-left和.pull-right在Bootstrap中），但由于您已经在使用Bootstrap，为什么不使用它们的网格系统进行布局。 这就是它的用途！

因此，设置购物车项目，并在其中添加.row，然后使用.col-xs-6将两个div分成两半。将内容放在每个div中。右侧的内容可以使用.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>

Demo in fiddle

这将是这样的：