为什么我不能在bootstrap列中对齐内容？

Question

我为我的行设置了相对位置，然后我尝试将我的社交按钮对齐到右下角但是失败了;（

我还为社交按钮类设置了绝对位置，但它似乎没有正确对齐。为什么会这样？

JsFiddle

HTML

<div class="container">

  <div class="jumbotron">
    <div class="row fixed-height">    
      <div class="col-xs-4">

          <button class="btn btn-primary btn-sm">
            <span class="glyphicon glyphicon-ok"></span>
            Some button!
          </button>

       </div>

      <div class="col-xs-8">
        <div class="social-buttons">

          <div class="btn-group-xs">

            <button class="btn btn-default">
              <span class="glyphicon glyphicon-thumbs-up"></span>
            </button>

            <button class="btn btn-default">
              <span class="glyphicon glyphicon-thumbs-down"></span>
            </button>

          </div>

        </div>
      </div>

    </div>
  </div>

</div>

CSS

.jumbotron {
    margin: 10px;
}
.row {
    margin: 8px 0;
    border: solid;
}

.fixed-height {
    height: 100%;
}

.social-buttons{
    position: absolute;
    bottom: 0;
    right: 0;
}

Answer 1

此处查看此代码段。这将使这些按钮垂直居中。试试这个 -

＆＃13;

＆＃13;

.jumbotron {
    margin: 10px;
}
.row {
    margin-top: 8px;
    margin-bottom: 8px;
    border: solid;
}

.fixed-height {
    height: 100%;
    position:relative;
}

.social-buttons{
    position:absolute;
    right:15px;
    top: 50%;
    -moz-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    -o-transform: translatey(-50%);
    -webkit-transform: translatey(-50%);
    transform: translatey(-50%);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

  <div class="jumbotron">
    <div class="row fixed-height">    
      <div class="col-xs-4">
            
          <button class="btn btn-primary btn-sm">
            <span class="glyphicon glyphicon-ok"></span>
            Some button!
          </button>
            
       </div>
          
      <div class="social-buttons">
           
          <div class="btn-group-xs">
            
            <button class="btn btn-default">
              <span class="glyphicon glyphicon-thumbs-up"></span>
            </button>

            <button class="btn btn-default">
              <span class="glyphicon glyphicon-thumbs-down"></span>
            </button>
            
          </div>
            
      </div>
          
    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是一个可能的解决方案：http://jsfiddle.net/cpveg8Lo/5/

<强> CSS

在行css

中添加位置作为相对位置

.row {
    margin: 2px 0;
    border: solid;
    position: relative;
}

并在社交按钮css中进行以下更改

.social-buttons{ 
    position:absolute;    
    right: 0;
    padding-right:0px;
    bottom:0;
}

<强> HTML

更新你的html，如下所示，

<div class="container">
  <div class="jumbotron">
    <div class="row fixed-height">    
      <div class="col-xs-4">            
          <button class="btn btn-primary btn-sm">
            <span class="glyphicon glyphicon-ok"></span>
            Some button!
          </button>            
       </div>          
      <div class="col-xs-8 social-buttons">
        <div class="pull-right">            
          <div class="btn-group-xs">            
            <button class="btn btn-default">
              <span class="glyphicon glyphicon-thumbs-up"></span>
            </button>
            <button class="btn btn-default">
              <span class="glyphicon glyphicon-thumbs-down"></span>
            </button>            
          </div>            
        </div>
      </div>          
    </div>
  </div>
</div>