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”,并出现混乱。有什么好方法可以通过在购物车下拉菜单上进行适当的下拉(悬停)来实现此目的。
此外,项目可以调整屏幕大小(而不是相互崩溃)。
谢谢。
提供完整的EXA。 (而不仅仅是HTML代码)。 – Dekel
@kirobo - 你能提供你的CSS吗? – Hynes
我的CSS是标准的引导程序。这个例子在HTML中给出。有没有一种好的方法来实现它? – kirobo