Question

我想使用引导网格系统在我的目标网页的右下角添加三个社交图标（带内联显示）。我没有使用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之外，在此代码中使用的所有内容）：

.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;
 }

现在我有这个：

但我想要这样的事情：

我是一个非常新的引导程序，我确信我在某个地方失踪了。我一直试图解决这个问题，但一直没有找到解决方案。任何帮助将不胜感激。感谢。

Answer 1

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

并移除div ul

上方的col-md-2 col-lg-2 col-xlg-2

Answer 2

请务必删除<div class="col-md-2 col-lg-2 col-xlg-2">以上的ul，并同时包含容器

请重写代码：

<div class="container">
    <div class="row">   
        <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> 
        <div class="col-xs-12 col-md-6 col-lg-6 col-xlg-6">
            <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>

还添加样式

    ul.list-style li {
        float: left;
        margin-right: 10px;
}

Answer 3

你会用

li {display : inline; }

但是这会将所有列表项更改为内联位置，因此使用

.list_style li { display: inline;}

只能访问list_style类中的列表

使用引导网格系统在右下角包含社交图标

3 个答案: