Question

我有一个bootstrap navbar-brand，当调整窗口大小（更小）时，它会向下跳（向下移动）。这是因为当调整窗口大小时右侧的导航栏菜单（三个水平条）与导航栏品牌一起崩溃..导航栏品牌内的徽标是svg格式..我如何调整导航栏品牌，以便它不会跳到下面？

菜单html代码：

{% filter shortcodes %}
    [gravityform id="1" title="false" description="false"][/gravityform]
{% endfilter %}

这是css代码（它的一部分）：

<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 -->

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

Answer 1

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

（您提供的代码有效）

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

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

1 个答案: