Bootstrap3使用图标在div中定位3个具有相等间距的元素

Question

我正在构建一个bootstrap 3站点，除了footer之外，其他所有内容基本完成。 我将footer划分为3个部分，而所有内容都位于div内，其类为container。大container由3个较小的div s组成：

<div class="col-sm-2">，其中包含一些文字。 <div class="col-sm-4">其中包含更多文字。 <div class="col-sm-6">应该拥有3个水平链接（它们之间的间距相等）+社交网络的图标（64x64）。

我想在第三个div中平均分隔元素并在下一个旁边放置一个图标（现在由于某种原因修剪了图标）。

感谢任何帮助，这是当前构建的一个小提琴： http://jsfiddle.net/uv99wj6q/

为了清楚起见，我添加了当前状态与所需状态的屏幕截图： 红色圆圈是我需要添加的图标（64x64）。如您所见，在上部屏幕截图中，linkedin文本类型重叠\修剪图标。

Answer 1

由于Bootstrap允许您嵌套其网格，我认为解决方案可能是将第三列.col-sm-6拆分为三个大小相等的列。您可以通过添加包含三个.row列的.col-sm-4来执行此操作。您还可以添加课程.text-center以使文字居中。

您可能认为需要三个.col-sm-2列，因为您希望它嵌套到col-sm-6列中，但每个嵌套网格包含12列。

＆＃13;

＆＃13;

.footer {
  background-color: #666;
  color: #fff;
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="row footer">
    <div class="col-xs-2"><h6>Copyright</h6></div>
    <div class="col-xs-4"><h6>About</h6></div>
    <div class="col-xs-6">
      <h6>Follow Me</h6>
      <div class="row">
        <div class="col-xs-4 text-center">LinkedIn</div>
        <div class="col-xs-4 text-center">Facebook</div>
        <div class="col-xs-4 text-center">Google</div>        
      </div>
    </div>
  </div>    
</div>

＆＃13;

＆＃13;

＆＃13;