我有一个页脚正确显示在页脚的桌面模式视图
页脚的代码是
<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>
当我尝试做出响应时,其视图会像这样转换
我希望保留与响应式设计中第一张图像相同的设计,任何人都可以告诉我如何做到这一点
答案 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将是并排的。