簡體   English   中英

Bootstrap 3 Gentelella導航欄對齊到正確的問題

[英]Bootstrap 3 Gentelella navbar alignment to the right issue

從瓷磚面板中移除3個元素中的一個元素時,剩下的2個元素未完全對齊 - 剩下1個空格。

之前: 之前

     <ul class="nav navbar-right panel_toolbox">
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> 
       <ul class="dropdown-menu" role="menu">
        <li><a href="#">Settings 1</a></li>
        <li><a href="#">Settings 2</a></li>
       </ul>
      </li>
      <li><a class="collapse-link"><i class="fa fa-chevron-up"> </i></a></li>
      <li><a class="close-link"><i class="fa fa-close"></i></a></li>
     </ul>

之后: 之后

     <ul class="nav navbar-right panel_toolbox">
      <li><a class="collapse-link"><i class="fa fa-chevron-up"> </i></a></li>
      <li><a class="close-link"><i class="fa fa-close"></i></a></li>
     </ul>

panel_toolbox的CSS看起來像這樣:

.panel_toolbox {
 float: right;
 min-width: 70px; }

.panel_toolbox > li {
 float: left;
 cursor: pointer; }

.panel_toolbox > li > a {
 padding: 5px;
 color: #C5C7CB;
 font-size: 14px; }

.panel_toolbox > li > a:hover {
 background: #F5F7FA; }

和navbar-right的CSS:

.navbar-right {
 margin-right: 0; }

可以修復嗎?

Rod,在CSS中,而不是:

.panel_toolbox > li {
float: left;
cursor: pointer; }

它應該是:

.panel_toolbox > li {
float: right;
cursor: pointer; }

為什么不在每個元素上添加“pull-right”類?

<ul class"nav navbar-right panel_toolbox">
    <li class="collapse-link pull-right"></li>
    <li class="close-link pull-right"></li>
</ul>

它應該會幫助你

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM