响应引导程序问题-移动站点
响应引导程序问题-移动站点
提问于 2014-10-03 17:54:57
我正在使用Bootstrap开发一个移动网站。
目前，我有一个标题，其特点是在屏幕的左侧和3个导航按钮右侧的公司标志。
如果徽标和导航按钮不能显示在屏幕上，我会试着调整所有内容的大小。
徽标的大小调整得很好，但是如果屏幕太小，3个导航按钮会换成新行。
我如何防止这一点，以便他们调整大小像徽标。我不确定我做错了什么。
请参阅下面的代码。
CSS：
#topNavButtons
{
margin: 0px;
padding: 0px;
list-style-type: none;
float: right;
}
#topNavButtons li
{
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
float: left;
padding: 0px 2px;
position: relative;
}HTML：
<nav>
<div class="col-xs-6" style="padding-left: 0px; padding-right: 0px;">
<a href="#">
<img style="padding: 10px;" class="img-responsive" src="logo.png" />
</a>
</div>
<div class="col-xs-6" style="padding: 0px">
<ul id="topNavButtons">
<li style="background: red"><a href="#"><img class="img-responsive" style="display: inline-block" src="navButton1.png" /></a></li>
<li style="background: green"><a href="#"><img class="img-responsive" style="display: inline-block" src="navButton2.png" /></a></li>
<li style="background: blue"><a href="#"><img class="img-responsive" style="display: inline-block" src="navButton3.png" /></a></li>
</ul>
</div>
</nav>回答 1
Stack Overflow用户
发布于 2014-10-04 01:18:45
演示：
需要一个宽度，你还需要使用网格系统的结构来防止额外的填充。
== HTML ==
<div class="col-xs-6 no-padding-right">
<a href="#">
<img class="img-responsive" src="http://placehold.it/150x29/000000/FFFFFF&text=LOGO" />
</a>
</div>
<div class="col-xs-6">
<ul id="topNavButtons">
<li><a href="#">
<img class="img-responsive" src="http://placehold.it/50x29/ba0404/FFFFFF&text=1" /></a>
</li>
<li><a href="#">
<img class="img-responsive" src="http://placehold.it/50x29/0474ba/FFFFFF&text=2" /></a>
</li>
<li><a href="#">
<img class="img-responsive" src="http://placehold.it/50x29/5b7c13/FFFFFF&text=3" /></a>
</li>
</ul>
</div>== CSS ==
topNavButtons {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: right;
white-space: nowrap;
font-size: 0px;
}
.no-padding-right {
padding-right: 0
}
#topNavButtons li {
display: inline-block;
padding: 0px 2px;
margin: 0 0 0 2px;
width:33.333%; /* whether floated inline-block or whatever you need a width to scale down as the viewport sizes */
max-width:50px;
}
#topNavButtons li img {
margin:0 0 0 auto;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26176850
复制相关文章
相似问题
腾讯云开发者
