Bootstrap页脚 - 链接 - 社交媒体标识 - 链接

I'm working on a footer for my website. I added social media logos from font-awesome and put it in the middle of my footer. When I added the links, the logos weren't in the middle anymore and you cannot see the links on the right side. I'm relatively new to HTML/CSS and I don't know how to fix it. What should I change that it looks like in the 2nd picture? And how can I change the "px" in the CSS file into "%" that it looks same on every monitor?

我正在为我的网站工作。我从font-awesome添加了社交媒体徽标并将其放在我的页脚中间。当我添加链接时,徽标不再位于中间,您无法在右侧看到链接。我是HTML / CSS的新手,我不知道如何修复它。我应该改变它在第二张图片中的样子?如何将CSS文件中的“px”更改为“%”,它在每台显示器上看起来都相同?

Sorry if my English isn't the best, Thanks in advance. :)

对不起,如果我的英语不是最好的,请提前致谢。 :)

What it looks like

它看起来像什么

What it should look like

应该是什么样的

My code:

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  position: fixed;
  height: 40px;
  background-color: #999999;
}
footer ul.footerleft{
    margin-left: 150px;
    margin-top: 10px;
}
footer ul.footerleft li{
    display: inline;
    margin-right: 25px;
}
footer a{
    color: #222;
}

footer a:hover{
    color: #ffffff;
    text-decoration: none;    
}
.social:hover {
     -webkit-transform: scale(1.0);
     -webkit-transition-duration: 0.5s;
 }
 .social {
     -webkit-transform: scale(0.8);
     color: #222;
     
 }

<!-- footer -->
    <footer class="footer">
        <nav class="navbar navbar-default navbar-custom">
            <div class="container-fluid">
                <div class="nav navbar-nav navbar-left">
                    <ul class="footerleft">
                        <li>
                            <a href="">Link 1</a>                   
                        </li>
                        <li>
                            <a href="">Link 2</a>                    
                        </li>
                        <li>
                            <a href="">Link 3</a>
                        </li>
                    </ul>
                </div>

                <div class="text-center center-block">
                    <a href=""><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>
                    <a href=""><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a>
                    <a href=""><i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i></a>
                    <a href=""><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
                </div>
                <div class="nav navbar-nav navbar-right">
                <ul>
                    <li>
                        <a href="">Link 4</a>
                    </li>
                    <li>
                        <a href="">Link 5</a>
                    </li>
                    <li>
                        Text
                    </li>
                </ul>
            </div>

            </div>
            
        </nav>
    </footer>

1 个解决方案

#1

I got it to work by moving the navbar-right div to the top.

我通过将导航栏右侧div移动到顶部来实现它。

<footer class="footer">
    <nav class="navbar navbar-default navbar-custom">
        <div class="container-fluid">
            <div class="nav navbar-nav navbar-right">
                <ul class="footerright">
                    <li>
                        <a href="">Link 4</a>
                    </li>
                    <li>
                        <a href="">Link 5</a>
                    </li>
                    <li>
                        Text
                    </li>
                </ul>
            </div>

            <div class="nav navbar-nav navbar-left">
                <ul class="footerleft">
                    <li>
                        <a href="">Link 1</a>
                    </li>
                    <li>
                        <a href="">Link 2</a>
                    </li>
                    <li>
                        <a href="">Link 3</a>
                    </li>
                </ul>
            </div>

            <div class="text-center">
                <a href=""><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>
                <a href=""><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a>
                <a href=""><i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i></a>
                <a href=""><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
            </div>

        </div>

    </nav>
</footer>

Then added some css for the footerright:

然后为footerright添加了一些css:

footer ul.footerright{
        margin-right: 150px;
        margin-top: 10px;
    }
    footer ul.footerright li{
        display: inline;
        margin-right: 25px;
    }

#1