twitter-bootstrap-导航栏元素有时被推到导航栏下

Question

I customized the default bootstrap navbar to have a image logo, a brand name and a tagline. 我自定义了默认的引导导航栏，以具有图像徽标，品牌名称和标语。 All this should sit inline within the right of the navbar. 所有这些都应该位于导航栏的右侧。

My code works BUT sometimes the tagline falls outside of the navbar, under the logo image. 我的代码有效， 但有时标语在徽标图像下方位于导航栏之外。 Refreshing the page fixes it. 刷新页面即可解决。

I was thinking it could be because the page calls too many assets on the first time it loads. 我在想这可能是因为该页面在首次加载时调用了太多资产。 Which could explain why refreshing the page fixes it (cached assets). 这可以解释为什么刷新页面可以解决此问题（缓存资产）。 Would that make sense? 那有意义吗？ How could I fix this? 我该如何解决？

NOTE: This issue is hard to replicate, so I included a drawing of the issue, and excerpts of my code that I hope are useful. 注意：此问题很难复制，因此我提供了该问题的图片以及希望对我的代码节选有用的内容。发行图

HTML (partial): HTML（部分）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="HandheldFriendly" content="true" />
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="shortcut icon" href="assets/img/favicon.ico">
  <title>My Website</title>
  <link href="assets/css/bootstrap.css" rel="stylesheet">
  <link href="assets/css/main.css" rel="stylesheet">
  <link href="assets/css/fonts.css" rel="stylesheet">
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" id="logo" href="#home"><img src="logo.png" /></a>
        <a class="navbar-brand" href="#home">BRAND</a>
        <a class="navbar-tagline" href="#">Aspire for more</a>
      </div>
    </div>
  </div>
<body>
<html>

CSS (partial): CSS（部分）：

.navbar-brand img {
    max-height: 60px;
    overflow: visible !important;
    background-color: rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.7);
}

.navbar-tagline {
  float: left;
  padding: 5px 0px;
  font-size: 15px;
  line-height: 20px;
  font-family: 'GibsonLightRegular';
  color: #9f7ab5;
}

Thank you for your help! 谢谢您的帮助！ Let me know if you need more infos. 让我知道您是否需要更多信息。

Answer 1

Just place this CSS. 只需放置此CSS。 Hope this will be ok.. 希望这可以..

.navbar-header a{float:left}

Update 更新

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <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="#"><img src="fav.png"></a>
    <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
    <li class="divider"></li>
    <li><a href="#">One more separated link</a></li>
    </ul>
    </li>
    </ul>
</div>
</nav>

You can add CSS by the class .logo 您可以通过类.logo添加CSS

<style>
    .logo{height:50px}
    .logo img{background-color:#889;;height:50px}
</style>

Just resize the logo to fit it. 只是调整徽标的大小以适合它。

Screen Shoot of my nav 我的导航屏幕截图

在此处输入图片说明

twitter-bootstrap-导航栏元素有时被推到导航栏下

问题描述

1 个解决方案

解决方案1
0 2014-04-02 20:03:27

twitter-bootstrap-导航栏元素有时被推到导航栏下

问题描述

1 个解决方案

解决方案1 0 2014-04-02 20:03:27

解决方案1
0 2014-04-02 20:03:27