0

我试图做一些简单的像这样 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”,并出现混乱。有什么好方法可以通过在购物车下拉菜单上进行适当的下拉(悬停)来实现此目的。

此外,项目可以调整屏幕大小(而不是相互崩溃)。

谢谢。

+1

提供完整的EXA。 (而不仅仅是HTML代码)。 – Dekel

+1

@kirobo - 你能提供你的CSS吗? – Hynes

+0

我的CSS是标准的引导程序。这个例子在HTML中给出。有没有一种好的方法来实现它? – kirobo

回答

0

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

有我添加“的位置是:绝对的;和宽度:200像素;像快速卡盒:

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

,但你不应该使用,作为一个内联CSS添加位置的宽度属性您快速卡框类在你的CSS文件

工作液:http://www.bootply.com/MPUBu5YhA8

我希望这是你要搜索的内容;)