使我的页脚图标不会叠加在一起，同时减少页面的宽度

I'm currently using bootstrap 3 to build my webpage and I'm using a footer along the bottom to contain links to various social media pages using small 24x24 icons. when the page is wide enough they all line up next to each other (floating to the right), however when I condense the page they stack on top of each other, making the footer very tall, how would I go about changing this so that even when they go onto a smaller screen, such as a condensed PC window, a phone, or tablet, they stay next to each other, rather that stacking on top of each other. Here is what I have so far:

我目前正在使用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>

1 个解决方案

#1

Just remove the navbar-nav from your unordered list and add display:inline-block to your list-items like this:

只需从无序列表中删除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;    
}

Here is a jsfiddle with above codes: https://jsfiddle.net/AndrewL32/e0d8my79/41/

这是一个上面代码的jsfiddle:https://jsfiddle.net/AndrewL32/e0d8my79/41/

#1