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

我给自己定的相对位置为我行，然后我试图对准我的社交按钮右下角，但失败了;（为什么我不能在引导列中对齐内容？

我还设置绝对位置为我的社交按钮类，它不似乎正确对齐。为什么会这样呢？

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

来源

2015-10-14 Billy Logan

正确的，因为你有一个div你不能保持一致的是跨越8列。 –

@ChristopherMarshall那我该怎么办？ –

http://jsfiddle.net/cpveg8Lo/1/将按钮移动到'8' col类中，并使用align-right的css属性。不知道这是否适用于您的实施。 –

这里是一个可能的解决方案：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>

来源

2015-10-14 22:05:03

谢谢你，Vimalan！ –

这里检查这个片段。这将保持这些按钮垂直居中。试试这个 -

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

<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>

来源

2015-10-14 21:26:38

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

回答

相关问题