導航欄導航欄品牌跳轉到導航欄菜單下方

我有一個bootstrap導航欄品牌，當窗口被調整大小（較小）時，它會跳下（向下移動）以尊重其原始位置。這是因爲在調整窗口大小時，右側的導航欄菜單（三個水平條）與導航欄品牌合攏。導航欄品牌內的徽標採用svg格式。如何調整導航欄品牌以便它不會跳到下面？導航欄導航欄品牌跳轉到導航欄菜單下方

菜單的html代碼：

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> <!-- end button navbar --> 
     <a class="navbar-brand" href="index.php"><img src="loghi/logo.svg"></a> 
    </div><!-- end navbar-header --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="index.php">Home</a></li> 
     <li><a href="chi_siamo.php">Chi Siamo</a></li> 
     <li><a href="listini.php">Listini</a></li> 
     <li><a href="contatti.php">Contatti</a></li> 
     <li><a href="disclaimer.php">Disclaimer</a></li> 
     </ul> 
    </div> <!-- end collapse navbar-collapse --> 
    </div> <!-- end container menu --> 
</nav> <!-- end navbar --> 
<!-- Carousel --> 
<div class="container"> 
     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
      <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
      <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
     </ol> 
     <!-- Wrapper for slides --> 
     <div class="carousel-inner"> 
      <div class="item active"> 
      <img src="img/img_1.jpg" alt="First slide"> 
      </div> 
      <div class="item"> 
      <img src="img/img_2.jpg" alt="Second slide"> 
      </div> 
      <div class="item"> 
      <img src="img/img_3.jpg" alt="Third slide"> 
      </div> <!-- end item --> 
     </div> <!-- end carousel-inner --> 
    </div> <!-- end carousel-example generic --> 
</div> <!-- end container --> 
<!-- /carousel -->

這是CSS代碼（的一部分）：

/****************/ 
/* BOOTSTRAP CSS*/ 
/****************/ 

.navbar { 
    min-height: 80px; 
    background-color: #FFFFFF; 
    border: 1px solid; 
} 

.navbar-brand { 
    padding: 0 15px; 
    height: 80px; 
    line-height: 80px; 
    border: 1px solid; 
} 

.navbar-toggle { 
    /* (80px - button height 34px)/2 = 23px */ 
    margin-top: 23px; 
    padding: 9px 10px !important; 
} 

@media (min-width: 768px) { 
    .navbar-nav > li > a { 
    /* (80px - line-height of 27px)/2 = 26.5px */ 
    padding-top: 26.5px; 
    padding-bottom: 26.5px; 
    line-height: 27px; 
    } 
} 


.navbar-brand img { 
    height: 80px; 
    border: 1px solid; 
} 

.nav.navbar-nav.navbar-right a{ 
font-size: 14px; 
} 

.nav.navbar-nav.navbar-right li a:hover { 
    font-weight: bold; 
    color: #eb0c0c; 
}

編輯：正如你從照片中可以看到，第一個和第二個是好的，但第三個不是..

來源

2017-05-31 P.Davide

做了'Navbar的brand'與媒體查詢較小。獲取它打破的寬度並添加媒體查詢以使其更小。 – Arthur

謝謝！它工作，我用這個簡單的代碼來解決問題： @media（max-width：420px）{ .navbar-brand {width：70％; } } –

我發佈了這個答案，所以你可以標記爲解決:) – Arthur

如果它只發生在較小的屏幕上，則可以使用媒體查詢，以便在較小的屏幕上更改圖像的寬度/高度。

（代碼，您提供的工作）

@media (max-width: 420px) { 
.navbar-brand { 
    width: 70%; 
} 
}

來源

2017-05-31 11:01:25 Arthur

是的，這就是我所做的，謝謝:) –

導航欄導航欄品牌跳轉到導航欄菜單下方

回答

相關問題