我正在尝试使用bootstrap 3来设计页脚,
当我最小化屏幕时,我的设计没有响应
我希望页脚菜单与大屏幕中的相同。
<footer id="footer" class="midnight-blue">
<div class="container">
<div class="row">
<div class="col-sm-6">
© 2013 <a target="_blank" href="" title="Free Twitter Bootstrap WordPress Themes and HTML templates">Layout</a>. All Rights Reserved.
</div>
<div class="col-sm-6">
<ul class="pull-right">
<li><a style="color:#FFF" href="#">Home</a></li>
<li><a style="color:#FFF" href="#">About Us</a></li>
<li><a style="color:#FFF" href="#">Faq</a></li>
<li><a style="color:#FFF" href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
这里的链接 https://jsfiddle.net/chaitu11/w3fbxsL2/2/
我以这种方式需要页脚,同时最小化
答案 0 :(得分:2)
您可以在无序列表中使用bootstrap class list-unstyled,list-inline。
<ul class="list-unstyled list-inline pull-right">
或 删除第14行上的媒体查询(@media(min-width:768px))也可以
答案 1 :(得分:1)
这是一个固定版本
<footer id="footer" class="midnight-blue">
<div class="container">
<div class="row">
<div class="col-sm-6">
© 2013 <a target="_blank" href="" title="Free Twitter Bootstrap WordPress Themes and HTML templates">Layout</a>. All Rights Reserved.
</div>
<div class="col-sm-6 clearfix">
<ul class="pull-right list-unstyled list-inline">
<li><a style="color:#FFF" href="#">Home</a></li>
<li><a style="color:#FFF" href="#">About Us</a></li>
<li><a style="color:#FFF" href="#">Faq</a></li>
<li><a style="color:#FFF" href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</footer>
答案 2 :(得分:0)
这是一个固定版本在响应式视图中显示
var qty = parseFloat(document.getElementById("txtQty").value);
var price = parseFloat(document.getElementById("txtPrice").value);
&#13;