twitter-bootstrap - Bootstrap - 布局问题

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; and a width: 200px; to the quick-card-box like:

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

但您不应该将其用作内联 CSS。将位置和宽度属性添加到您的 css 文件中的 quick-card-box 类。

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

我希望这就是您正在寻找的。 ;)