Bootstrap 3页脚没有响应答案

【问题标题】：Bootstrap 3 Footer is not responsiveBootstrap 3页脚没有响应
【发布时间】：2015-06-01 12:54:59
【问题描述】：

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

我需要这种方式的页脚，同时最小化

【问题讨论】：

标签： twitter-bootstrap responsive-design footer

【解决方案1】：

您可以在无序列表上使用引导类 list-unstyled 、 list-inline 。

<ul class="list-unstyled list-inline pull-right">

或在第 14 行删除您的媒体查询 (@media (min-width: 768px)) 也有效

【讨论】：

【解决方案2】：

这是一个固定版本

<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>

【讨论】：

【解决方案3】：

这是在响应视图上显示的固定版本

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer id="footer" class="midnight-blue">
    <div class="container">
        <div class="row text-center">
            <div class="col-sm-6 col-xs-12">
                © 2013 <a target="_blank" href="" title="">Layout</a>. All Rights Reserved.
            </div>
            <div class="col-sm-6 col-xs-12">
                <ul class="list-unstyled list-inline ">
                    <li><a style="color:#000" href="#">Home</a></li>
                    <li><a style="color:#000" href="#">About Us</a></li>
                    <li><a style="color:#000" href="#">Faq</a></li>
                    <li><a style="color:#000" href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>

【讨论】：