Bootstrap - 布局问题答案

【问题标题】：Boostrap - Layout IssueBootstrap - 布局问题
【发布时间】：2017-01-02 21:30:13
【问题描述】：

我正在尝试做一些像这样简单的事情 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”中并且看起来很乱。有什么好的方法可以通过购物车下拉列表中的正确下拉列表（悬停时）来实现这一点。

此外，是否可以根据屏幕大小调整项目（而不是相互折叠）。

谢谢。

【问题讨论】：

提供一个完整的例子（不仅仅是 HTML 代码）。
@kirobo — 你能提供你的 CSS 吗？
我的 CSS 是标准引导程序。该示例以 HTML 格式给出。有什么好的方法可以实现吗？

标签： twitter-bootstrap css twitter-bootstrap-3 responsive-design

【解决方案1】：

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

我在快速卡片框中添加了“位置：绝对；宽度：200px；”，例如：

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

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

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

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

【讨论】：