Bootstrap 3页脚没有响应

时间:2015-03-28 03:57:58

标签: twitter-bootstrap responsive-design footer

我正在尝试使用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/

我以这种方式需要页脚,同时最小化 I want it in this way

3 个答案:

答案 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)

这是一个固定版本在响应式视图中显示

&#13;
&#13;
 var qty = parseFloat(document.getElementById("txtQty").value);
 var price = parseFloat(document.getElementById("txtPrice").value);
&#13;
&#13;
&#13;