从Bootstrap中的列中删除填充

Question

第一张图片是我向图标添加css的时候。它看起来很完美但没有响应。我没有使用任何.col值。这是css代码

.fb {
background: none;
float: left;
height: 37px;
overflow:hidden;
    }
.fb img {
transition: 0.4s;
overflow: hidden;
}
.fb img:hover {
margin-top: -37px;
}

这是HTML代码          

    <!--Social Icons UL Starts-->
    <ul>
        <li class="fb"><a href="#"><img src="images/facebook.png" alt="Facebook"></a></li>
        <li class="fb"><a href="#"><img src="images/twitter.png" alt="Facebook"></a></li>
        <li class="fb"><a href="#"><img src="images/linkedin.png" alt="Facebook"></a></li>
        <li class="fb"><a href="#"><img src="images/gplus.png" alt="Facebook"></a></li>
    </ul>
    <!--Social Icons Ul Ends-->

</div>
<div class="clearfix"></div>
<!--Social Ends-->

现在我添加了一些列代码并添加了填充属性，结果与第二张图像中的结果相同。这是我用HTML写的

    <!--Social Starts-->
<div class="col-md-3 col-md-offset-3 social text-center">

    <!--Social Icons UL Starts-->
    <ul>
        <li class="fb col-sm-2 col-xs-offset-1"><a href="#"><img src="images/facebook.png" alt="Facebook"></a></li>
        <li class="fb col-sm-2 col-xs-offset-1"><a href="#"><img src="images/twitter.png" alt="Facebook"></a></li>
        <li class="fb col-sm-2 col-xs-offset-1"><a href="#"><img src="images/linkedin.png" alt="Facebook"></a></li>
        <li class="fb col-sm-2 col-xs-offset-1"><a href="#"><img src="images/gplus.png" alt="Facebook"></a></li>
    </ul>
    <!--Social Icons Ul Ends-->

</div>
<div class="clearfix"></div>
<!--Social Ends-->

我该怎么办？我做错了什么，但我无法弄清楚。

Answer 1

试试这个： -              

    <!--Social Icons UL Starts-->
    <ul>
        <li class="fb col-sm-2 col-sm-offset-1"><a href="#"><img src="images/facebook.png" alt="Facebook"></a></li>
        <li class="fb col-sm-2 col-sm-offset-1"><a href="#"><img src="images/twitter.png" alt="Facebook"></a></li>
        <li class="fb col-sm-2 col-sm-offset-1"><a href="#"><img src="images/linkedin.png" alt="Facebook"></a></li>
        <li class="fb col-sm-2 col-sm-offset-1"><a href="#"><img src="images/gplus.png" alt="Facebook"></a></li>
    </ul>
    <!--Social Icons Ul Ends-->

</div>
<div class="clearfix"></div>
<!--Social Ends-->

修改：替换课程col-xs-offset-1 to col-sm-offset-1以完成12的网格。

Answer 2

<div class="col-md-3 col-md-offset-3 ">

    <!--Social Icons UL Starts-->
    <ul>
        <li class="fb col-sm-3"><a href="#"><img src="images/facebook.png" alt="Facebook"></a></li>
        <li class="fb col-sm-3"><a href="#"><img src="images/twitter.png" alt="Facebook"></a></li>
        <li class="fb col-sm-3"><a href="#"><img src="images/linkedin.png" alt="Facebook"></a></li>
        <li class="fb col-sm-3"><a href="#"><img src="images/gplus.png" alt="Facebook"></a></li>
    </ul>
    <!--Social Icons Ul Ends-->

</div>
<div class="clearfix"></div>

试试这个，因为我正在努力。