在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中寻找导航栏，有更简单更好的方法