自舉 - 佈局問題

我試圖做一些簡單的像這樣 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」，並出現混亂。有什麼好方法可以通過在購物車下拉菜單上進行適當的下拉（懸停）來實現此目的。

此外，項目可以調整屏幕大小（而不是相互崩潰）。

謝謝。

來源

2017-01-01 kirobo

提供完整的EXA。（而不僅僅是HTML代碼）。 – Dekel

@kirobo - 你能提供你的CSS嗎？ – Hynes

我的CSS是標準的引導程序。這個例子在HTML中給出。有沒有一種好的方法來實現它？ – kirobo

下次你應該提供一個完整的例子。我已經構建了您提供的html代碼的bootply。

有我添加「的位置是：絕對的;和寬度：200像素;像快速卡盒：

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

，但你不應該使用，作爲一個內聯CSS添加位置的寬度屬性您快速卡框類在你的CSS文件

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

我希望這是你要搜索的內容;）

來源

2017-01-02 13:30:13

自舉 - 佈局問題

回答

相關問題