我目前正在使用bootstrap 3来构建我的网页,并且我使用底部的页脚来包含使用小型24x24图标链接到各种社交媒体页面的链接。当页面足够宽时,它们彼此相邻排列(向右浮动),然而当我压缩页面时,它们堆叠在一起,使页脚非常高,我将如何改变这一点,以便即使他们进入较小的屏幕,例如浓缩的PC窗口,手机或平板电脑,它们彼此相邻,而不是彼此堆叠。以下是我到目前为止的情况:
<div class = "navbar-inverse navbar-fixed-bottom">
<div class = "container">
<ul class = "nav navbar-nav navbar-right">
<li><a target = "_blank" href = "https://www.facebook.com/"><img src=facebook.png></a></li>
<li><a target = "_blank" href = "https://plus.google.com/"><img src=google-plus.png></a></li>
<li><a target = "_blank" href = "https://twitter.com/"><img src=twitter.png></a></li>
<li><a target = "_blank" href = "https://uk.linkedin.com/"><img src=linkedin.png></a></li>
</ul>
</div>
</div>
答案 0 :(得分:0)
只需从无序列表中删除navbar-nav,然后将display:inline-block添加到您的列表项中,如下所示:
HTML:
<div class = "navbar navbar-inverse navbar-fixed-bottom">
<div class = "container">
<ul class = "nav navBot navbar-right">
<li><a target = "_blank" href = "https://www.facebook.com/"><img src=facebook.png></a></li>
<li><a target = "_blank" href = "https://plus.google.com/"><img src=google-plus.png></a></li>
<li><a target = "_blank" href = "https://twitter.com/"><img src=twitter.png></a></li>
<li><a target = "_blank" href = "https://uk.linkedin.com/"><img src=linkedin.png></a></li>
</ul>
</div>
</div>
CSS:
.navBot li {
display:inline-block;
}
以下是具有上述代码的jsfiddle:https://jsfiddle.net/AndrewL32/e0d8my79/41/