爲什麼我不能在引導列中對齊內容？

我給自己定的相對位置爲我行，然後我試圖對準我的社交按鈕右下角，但失敗了;（爲什麼我不能在引導列中對齊內容？

我還設置絕對位置爲我的社交按鈕類，它不似乎正確對齊。爲什麼會這樣呢？

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

爲什麼我不能在引導列中對齊內容？

回答

相關問題