Bootstrap navbar-brand 跳转到导航栏菜单下方答案

【问题标题】：Bootstrap navbar-brand jump below the navbar menuBootstrap navbar-brand 跳转到导航栏菜单下方
【发布时间】：2017-05-31 09:42:15
【问题描述】：

i 有一个引导导航栏品牌，当窗口调整大小（更小）时，它会跳到下方（向下移动）尊重其原始位置。那是因为在调整窗口大小时右侧的导航栏菜单（三个水平条）与导航栏品牌一起折叠。导航栏品牌内的徽标是 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;
}

编辑：从照片中可以看出，第一张和第二张都可以，但第三张不行..

【问题讨论】：

使用媒体查询使navbar-brand 更小。获取中断处的宽度并添加媒体查询以使其更小。
谢谢！它奏效了，我用这个简单的代码解决了这个问题：@media (max-width: 420px) { .navbar-brand { width: 70%; } }
我将此作为答案发布，因此您可以将其标记为已解决 :)

标签： css twitter-bootstrap svg navbar

【解决方案1】：

如果它只发生在较小的屏幕上，您可以使用媒体查询，这样它将改变较小屏幕上图像的宽度/高度。

（您提供的有效代码）

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

【讨论】：