Question

我正在尝试做这样简单的事情 http://imgur.com/a/T7Wgg

这是我的代码。

 <section class="info-bar info-bar-clean">
        <div class="container">

            <div class="row">
                <div class="col-md-11">
                    <div class="col-sm-3 hidden-xs">
                        <i class="fa fa-3x fa-credit-card"></i>
                        <h5 class="topbar-lh">Payment on Delivery</h5>
                    </div>

                    <div class="col-sm-3 hidden-xs">
                        <i class="fa fa-3x fa-refresh"></i>
                        <h5 class="topbar-lh">7 Day Free Returns</h5>
                    </div>

                    <div class="col-sm-3 hidden-xs">
                        <i class="fa fa-3x fa-shield"></i>
                        <h5 class="topbar-lh">Genuine Products</h5>
                    </div>

                    <div class="col-sm-3 hidden-xs">
                        <i class="fa fa-3x fa-truck"></i>
                        <h5 class="topbar-lh">Free Delivery Nationwide</h5>
                    </div>
                </div>
                <div class="col-md-1 col-xs-12">
                    <!-- BUTTONS -->
                    <ul class="pull-right nav nav-pills nav-second-main">

                        <!-- QUICK SHOP CART -->
                        <li class="quick-cart">
                            <a href="#">
                                <span class="badge badge-aqua btn-xs badge-corner">2</span>
                                <i class="fa fa-shopping-cart"></i>
                            </a>
                        </li>
                        <!-- /QUICK SHOP CART -->

                    </ul>
                    <!-- /BUTTONS -->

                </div>


            </div>

        </div>
    </section>

现在我想在这样的购物车上下载：

 <li class="quick-cart">
      <a href="#">
           <span class="badge badge-aqua btn-xs badge-corner">2</span>
           <i class="fa fa-shopping-cart"></i>
      </a>
      <div class="quick-cart-box">
           <h4>Shop Cart</h4>
           <div class="quick-cart-wrapper">
                <a href="#"><!-- cart item -->
                     <img src="assets/images/demo/people/300x300/4-min.jpg" width="45" height="45" alt="" />
                     <h6><span>2x</span> RED BAG WITH HUGE POCKETS</h6>
                     <small>$37.21</small>
                </a><!-- /cart item -->
                <a href="#"><!-- cart item -->
                     <img src="assets/images/demo/people/300x300/5-min.jpg" width="45" height="45" alt="" />
                     <h6><span>2x</span> THIS IS A VERY LONG TEXT AND WILL BE TRUNCATED</h6>
                     <small>$17.18</small>
                </a><!-- /cart item -->
                <!-- cart no items example -->
                <!--
                     <a class="text-center" href="#">
                          <h6>0 ITEMS ON YOUR CART</h6>
                     </a>
                -->
           </div>
           <!-- quick cart footer -->
           <div class="quick-cart-footer clearfix">
                <a href="shop-cart.html" class="btn btn-primary btn-xs pull-right">VIEW CART</a>
                <span class="pull-left"><strong>TOTAL:</strong> $54.39</span>
           </div>
           <!-- /quick cart footer -->
      </div>
 </li>

它只出现在“col-md-3”中并且显得混乱。有没有什么好方法可以通过正确下拉购物车下拉菜单（悬停时）实现这一目标。

此外，可以使用屏幕尺寸调整项目（而不是相互折叠）。

谢谢。

Answer 1

下次你应该提供一个完整的例子。我已经构建了你提供的HTML代码的bootply。

在那里我添加了“position：absolute;和宽度：200px;添加到快速卡盒：

<div class="quick-cart-box" style="position: absolute; width: 200px">

但你不应该将它用作内联css。将位置和宽度属性添加到css文件中的快速卡盒类。

工作解决方案：http://www.bootply.com/MPUBu5YhA8

我希望这就是你要找的东西。 ;）

Boostrap - 布局问题

1 个答案: