导航栏导航栏品牌跳转到导航栏菜单下方

我有一个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

是的，这就是我所做的，谢谢:) –

导航栏导航栏品牌跳转到导航栏菜单下方

回答

相关问题