ブートストラップ - 私はこの <a href="https://imgur.com/a/T7Wgg" rel="nofollow noreferrer">http://imgur.com/a/T7Wgg</a></p> <p>のような単純な何かをしようとしている問題

Question

レイアウトは、ここに私のコードです。今

<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を構築しました。

が

i「が追加位置ました：絶対;幅：200pxの;のようなクイックカードボックスに：。

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

いますが、インラインCSSとしてそれを使用するべきではありません追加。。幅はあなたのCSSファイルにあなたのクイックカードボックスクラスに属性

ワーキングソリューション位置：http://www.bootply.com/MPUBu5YhA8

私は、これはあなたが探しているものであると思います;）