html - Bootstrap img responsive，在导航栏中不会变小

Question

大家好，我有一个问题，我的 Logo 位于导航栏的左侧，而导航栏位于右侧。现在我正在缩小屏幕，我试图让图像看起来更小，这样导航文本和图像就不会相互重叠。所以基本上是一个响应式设计。但是由于某种原因，它似乎根本不起作用，

我已经使用了 boostrap 说要使用的 class="img-fluid 但它似乎在 Logo 上根本不起作用，所以在这个问题上的任何帮助都会很棒

Fiidle 链接:Here

我在导航栏上使用了 float，也许这就是问题所在？但是我还是不太确定如何使图像具有响应性并随着页面缩小而变小

P.S 正如你在 fiddle 中看到的，图像实际上只在窗口变得非常小时才开始缩小，几乎小于移动版本

HTML:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
        <div class="navbar-header">
            <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
            <div class="logo"><img class="img-responsive" src="https://www.martialartsschoolsdirectory.com/logos/profile/checkmat-logo-burbank-ca-184.png"></div>
        </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="#">NAVBARA</a></li>
      <li><a href="#">NAVBARA</a></li>
      <li><a href="#">NAVBARA</a></li>
      <li><a href="#">d</a></li>
                    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">NAVBARA</a>
        <ul class="dropdown-menu">
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
          <li><a href="#">8</a></li>
        </ul>
      </li>
      <li><a href="#">9</a></li>
      <li><a href="#">11</a></li>
      <li><a href="#">12</a></li>
    </ul>
  </div><!--/.nav-collapse -->
</div><!--/.container-fluid -->

CSS:

.navbar-nav>li>a {
    line-height: 6px;
}

.navbar-nav {
    float: right;
    margin-top: -15px;
}
.navbar {
  padding-top: 53px;
  font-size: 13px;
  text-transform: uppercase;



}

.navbar-default {
    background-color: transparent;
    border-top: 0px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0px solid rgba(0, 0, 0, 0.5);
    border-left: 0px solid rgba(0, 0, 0, 0.5);
    border-right: 0px solid rgba(0, 0, 0, 0.5);
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    height: 87px;
}

.navbar-default .navbar-nav>li>a {
    color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus {
      background-color: #F8BD23;
      text-decoration: none;
       color: #ffffff;
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    }

    .navbar-nav > li{
  padding-left:30px;

}

body {

  background-color: black;
  }

Answer 1

.logo img {width:100px;}

否则试试
在 img 标签内添加 width="100"