使页脚响应

时间:2015-05-08 11:05:13

标签: html css html5 css3 twitter-bootstrap

我有一个页脚正确显示在页脚的桌面模式视图

enter image description here

页脚的代码是

 <div class="footer">
    <div class="container">
        <div class="row">

            <div class="col-footer col-md-4 col-xs-7">
                <ul class="no-list-style footer-navigate-section">
                    <li><a href="#">Join</a></li>
                    <li><a href="#">Login</a></li>
                    <li><a href="#">Order History</a></li>
                    <li><a href="#">Write Review</a></li>
                    <li><a href="#">Logout</a></li>
                </ul>
            </div>

            <div class="col-footer col-md-4 col-xs-7">
                <ul class="no-list-style footer-navigate-section">
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">How It Works</a></li>
                    <li><a href="#">T&C</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
            <div class="col-footer col-md-4 col-xs-7">
                <ul class="menuextras extras">


                    <li><a href="#"><img src="icons/facebook.png" height="30" width="30" ></a></li>
                    <li><a href="#"><b><img src="icons/twitter.png" height="30" width="30"></b></a></li>
                    <li><a href="#"><b><img src="icons/linkedin.png" height="30" width="30"></b></a></li>


                </ul>
            </div>
        </div>
    </div>
  </div>

当我尝试做出响应时,其视图会像这样转换

enter image description here

我希望保留与响应式设计中第一张图像相同的设计,任何人都可以告诉我如何做到这一点

2 个答案:

答案 0 :(得分:2)

请尝试以下操作: Demo

<div class="footer">
    <div class="container">
        <div class="row">

            <div class="col-footer col-md-4 col-xs-4">
                <ul class="no-list-style footer-navigate-section">
                    <li><a href="#">Join</a></li>
                    <li><a href="#">Login</a></li>
                    <li><a href="#">Order History</a></li>
                    <li><a href="#">Write Review</a></li>
                    <li><a href="#">Logout</a></li>
                </ul>
            </div>

            <div class="col-footer col-md-4 col-xs-4">
                <ul class="no-list-style footer-navigate-section">
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">How It Works</a></li>
                    <li><a href="#">T&C</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
            <div class="col-footer col-md-4 col-xs-4">
                <ul class="menuextras extras">


                    <li><a href="#"><img src="icons/facebook.png" height="30" width="30" ></a></li>
                    <li><a href="#"><b><img src="icons/twitter.png" height="30" width="30"></b></a></li>
                    <li><a href="#"><b><img src="icons/linkedin.png" height="30" width="30"></b></a></li>


                </ul>
            </div>
        </div>
    </div>

答案 1 :(得分:0)

在xs-mode中,您有3个列,宽度为7列。 Bootstrap有一个12 coloumn网格。例如改变为col-xs-4和所有3个div将是并排的。