在jumbotron中垂直對齊glyphicons

Question

我已經創建了jumbotron，左側有一些文字，左側有一些文字，右側有一些文字。 雖然左側的文字與中間垂直對齊，但右側的文字以及glyphicon的文字是以下的 jumbotron。

下面是HTML代碼： -

<div class="jumbotron" > 
     <div class="container-fluid text-left" style="padding-left:4px;"> 

      <p style="color:#f8921e">Text</p> 

      <ul style="list-style-type:none "> 
       <li><a class="glyph" href="#"> <span class="glyphicon glyphicon-cog"></span> Settings</a></li> 
       <li><a class="glyph" href="#"> <span class="glyphicon glyphicon-log-out"></span> Logout</a></li> 
      </ul> 
     </div> 
    </div> 

這是CSS代碼： -

.jumbotron 
    { 
     width:100%; 
     color: #f8921e; 
     top:0; 
     padding:20px; 
     z-index:9; 
     position:fixed; 
     height:10%; 
     background-color:black; 

    } 
.glyph 
    { 
     margin-right:20px; 
     font-size:100%; 
     color:#f8921e; 
     float:right; 
     padding-top:10px; 
     display:block; 
     text-align:center; 

    } 

Answer 1

檢查了這一點。當您將註銷和設置寫入無序列表時，它會成爲另一個代碼塊。所以它將其與p區塊中的文字區分開來。

https://jsfiddle.net/2ebc317L/

.jumbotron 
 
    { 
 
     width:100%; 
 
     color: #f8921e; 
 
     top:0; 
 
     padding:20px; 
 
     z-index:9; 
 
     position:fixed; 
 
     height:10%; 
 
     background-color:black; 
 

 
    } 
 
.glyph 
 
    { 
 
     margin-right:30px; 
 
     font-size:100%; 
 
     color:#f8921e; 
 
     float:right; 
 
     
 
     display:block; 
 
     text-align:center; 
 

 
    }

<div class="jumbotron" > 
 
     <div class="container-fluid text-left" style="padding-left:4px;"> 
 

 
      <p style="color:#f8921e">Text 
 

 
      
 
       <a class="glyph" href="#"> <span class="glyphicon glyphicon-cog"></span> Settings</a> 
 
       <a class="glyph" href="#"> <span class="glyphicon glyphicon-log-out"></span> Logout</a>    
 
      
 
      </p> 
 
      
 
      
 
      
 
     </div> 
 
    </div>

，如果你正試圖使導航欄，我難道不建議這種方式，因爲這將導致越來越多的問題，你添加的東西。在bootstrap中尋找導航欄，有更簡單更好的方法