0

这看起来很棒：

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;
        }
    }
4

1 回答 1

0

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

于 2013-10-13T07:44:05.613 回答