引導程序的導航欄元素的位置

使用引導程序的導航欄元素我需要在導航欄的中心放置一條歡迎消息。我使用下面的HTML結構自舉的例子：引導程序的導航欄元素的位置

<nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Brand</a> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5"> 
      <p class="navbar-text navbar-right welcome-message">Welcome, Tom Delonge</p> 
     </div> 
     </div> 
    </nav>

名稱後「歡迎」 dynamicaly變化，使我增加了一個小的jQuery代碼要把它始終圍繞：

$(document).ready(function(){ 
    var welcomeMessage = $('.welcome-message'); 
    var width = welcomeMessage.width(); 
    var offset = width/2; 
    welcomeMessage.css('margin-right', '-' + offset + 'px'); 
});

FIDDLE Live example

我想知道是否有更好的解決方案，例如只使用CSS。提前致謝。

來源

2015-05-04 user3127896

刪除您的JavaScript和這個替換CSS：

.welcome-message { float: none !important; text-align: center; }

來源

2015-05-04 11:08:49 Ruben

CSS

.welcome-message { 
    position: absolute; 
    left: 50%; 
transform:translate(-50%,0); 
}

就上述CSS會做的伎倆

DEMO

來源

2015-05-04 08:02:34

重塑你的Welcome text類，並添加一些自定義CSS代碼中心。不需要額外的JS。

HTML

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 
    <div class="navbar-collapse" id="bs-example-navbar-collapse-5"> 
     <p class="navbar-text navbar-center welcome-message">Welcome, A very long name here</a></p> 
    </div> 
    </div> 
</nav>

CSS

.navbar-collapse { 
    text-align:center; 
} 
.navbar-center { 
    display:inline-block; 
    float:none; 
}

DEMO

來源

2015-05-04 08:07:06

添加這個CSS

@media only screen and (max-width: 770px) { 
    .welcome-message { 
     margin-top: -35px; 
     position: absolute; 
    left: 50%; 
transform:translate(-50%,0); 

} 
} 
@media only screen and (min-width: 770px) { 
    .welcome-message { 
    position: absolute; 
    left: 50%; 
transform:translate(-50%,0); 
} 
}

DEMO

來源

2015-05-04 10:51:43 sheshadri

引導程序的導航欄元素的位置

回答

相關問題