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

Question

我有一个 bootstrap navbar-brand 跳到下面(向下移动)当窗口被调整大小时(更小)尊重它的原始位置。那是因为在调整窗口大小时，右侧的导航栏菜单(三个水平条)与导航栏品牌一起折叠。导航栏品牌内的 Logo 采用 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;
}

编辑:从照片中可以看出，第一个和第二个没问题，但第三个不行..

Answer 1

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

(您提供的有效代码)

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