html - 使用 Bootstrap 网格系统在右下角包含社交图标

Question

我想使用 Bootstrap 网格系统在我的登陆页面的右下角添加三个社交图标(带内联显示)。我没有使用 bootstrap font-awesome。我已尝试执行以下操作，但图标未内联显示，而是向下显示。

HTML:

<div class="row">

        // this was for the stuff placed on the bottom left.

        <div class="col-xs-12 col-md-6 col-lg-6 col-xlg-6">
            <div class="col-xs-12 col-md-4 col-lg-4 col-xlg-4">
                    <ul class="contact list-style">
                        <li class="uppercase blue-text-color">Company</li>
                        <li class="active uppercase"> <a href="">About</a> </li>
                        <li class="uppercase"> <a href="">Careers</a> </li>
                        <li class="uppercase"> <a href="">Blogs</a> </li>
                    </ul>
            </div>

            <div class="col-xs-12 col-md-4 col-lg-4 col-xlg-4">
                <ul class="contact list-style">
                    <li class="uppercase blue-text-color">Get in touch</li>
                    <li class="active uppercase"> <a href="">contact us</a> </li>
                    <li>1-800-706-0806</li>
                </ul>
            </div>

            <div class="col-xs-12 col-md-4 col-lg-4 col-xlg-4">
                <ul class="contact list-style">
                    <li class="uppercase blue-text-color">help</li>
                    <li class="active uppercase"> <a href="">Privacy policy</a> </li>
                    <li class="uppercase"> <a href="">terms of service</a> </li>
                </ul>
            </div>
    </div> 

         // now the following is for the icons i wish to include
        // in the bottom right.

        <div class="col-xs-12 col-md-6 col-lg-6 col-xlg-6">
            <div class="col-md-2 col-lg-2 col-xlg-2">
                    <ul class="list-style" style="display: inline;">
                        <li><a href="#"><img src="./img/new/facebook.png" alt="facebook" width="50px" height="50px"></a></li>
                        <li><a href="#"><img src="./img/new/twitter.png" alt="twitter" width="50px" height="50px"></a></li> 
                        <li><a href="#"><img src="./img/new/linkedin.png" alt="linkedin" width="50px" height="50px"></a></li>
                    </ul>
            </div>
        </div>

    </div>  

CSS(除了链接的 bootstrap.min.css 之外，此代码中使用的所有 CSS):

.content {
 padding: 30px 10px;
}

.contact a{
 text-decoration: none;
 color: #888888;
 }

.list-style {
 list-style: none;
 }

.uppercase {
 text-transform: uppercase;
}

.blue-text-color {
 color: #33BBDB;
 }

现在我有这个:

但我想要这样的东西:

我是 bootstrap 的新手，我确信我遗漏了某处。长期以来，我一直在努力解决这个问题，但一直未能找到解决方案。任何帮助将不胜感激。谢谢。

Answer 1

使用.list-style li{ display:inline;}

并删除 div col-md-2 col-lg-2 col-xlg-2

上面的 ul