Question

这看起来很棒：

http://imageshack.us/a/img96/5789/n4u7.png

但是当你缩小另外5个像素时，列会出现断裂，图像会变为新行。

http://imageshack.us/a/img59/2195/uk4v.png

相反，我希望图像缩小，因此它可以与可折叠按钮保持在同一条线上。

HTML：

  <!-- navbar -->
  <nav class="navbar navbar-default navbar-fixed-top">
      <!-- container -->
      <div class="container">
        <!-- navbar header -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
              <img class="img-responsive" src="assets/img/logo.png" >
            </a>
          </div>
          <!-- /navbar header -->
          <!-- collapse -->
          <div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Projects</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
          <!-- /collapse -->
        </div>
    <!-- container -->
  </nav>
  <!-- /navbar -->

CSS：

    nav.navbar {
      padding-top: 0;
      padding-bottom: 0;
      background: rgba(179, 153, 255, .5)
    }

    nav.navbar div.container {
      background: rgba(179, 153, 255, 1.0);
      border: 1px solid black;
    }

    a.navbar-brand {
      padding: 0 0 20px 15px;
    }

    img.img-responsive {
      width: 100%;
    }

    @media (min-width: 992px) {
        ul.navbar-nav li a {
            padding-top: 12px;
            padding-bottom: 12px;
            border-top: 2px solid white;
            border-bottom: 2px solid white;
          margin-top: 36px;
        }
    }

Answer 1

如果希望在缩小视口时缩小图像，则需要将图像包含元素的宽度设置为百分比。在这种情况下，图像的立即包含元素是锚点，因此如果您将锚点宽度设置为60％或其他任何工作，那么当视口收缩时，锚点宽度将缩小以保持其容器的60％，并且图像具有它的宽度100％的锚也会缩小。 Anchor也需要显示块级别。

Bootstrap 3导航栏折叠为两行而不是缩小图像

1 个答案: