使页脚响应

Question

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

页脚的代码是

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

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

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

Answer 1

请尝试以下操作： 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>

Answer 2

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