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

我有一个引导导航栏品牌，在调整窗口大小（较小）时，该导航品牌跳到下面（向下移动）并尊重其原始位置。这是因为在调整窗口大小时，右侧的导航栏菜单（三个水平条）会与navbar品牌一起折叠。navbar品牌内的徽标为svg格式。如何调整navbar品牌，以便它不会跳到下面吗？

菜单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;
}

编辑：从照片中可以看到，第一个和第二个都可以，但第三个不可以。

最佳答案

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

（您提供的有效代码）

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

关于css - Bootstrap导航栏品牌跳转到导航栏菜单下方，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44281235/