导航栏上的响应式品牌形象

Question

当我尝试将其最小化时，导航栏上的图像出现问题，因为我可以通过折叠按钮将图像向下推。是否可以在不使用媒体查询的情况下使图像变得响应？因为我认为作为初学者使用媒体查询只是为了使图像变得响应是一种不好的做法，我认为还有其他方法可以在不使用媒体查询的情况下实现这一点:) 我是 html、css 和引导程序的新手。提前致谢。

这是未最小化时的图像。

这是最小化后的图像，您可以看到该图像被折叠按钮按下。

这是我用于导航栏的 html 代码。

<div class="collapse navbar-collapse" id="nav-collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Students</a></li>
        <li><a href="#">Faculty</a></li>
        <li><a href="#">Contact us</a></li>

    </ul>

    <ul class="nav navbar-nav navbar-right">
                <li><a data-toggle="modal" href="#myModal" ><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                <!-- Modal -->
                    <div id="myModal" class="modal fade" role="dialog">
                        <div class="modal-dialog">
                <!-- Modal content--> 
                         <div class="modal-content">
                             <div class="modal-header"> 
                                 <button type="button" class="close" data-dismiss="modal">&times;</button>
                             </div>
                             <div class="modal-body">
                                <p>Some text in the modal.</p>
                             </div>
                             <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                             </div>
                         </div>
                        </div>
                   </div>
         </ul>
      </div>
     </div>
   </nav>

这是我的 CSS

 .navbar-default .navbar-nav > li > a {
 font-weight: 590;
 color: #949494;
 display: block;
 padding: 5px 35px 2px 45px;
 border-bottom: 3px solid transparent;
 line-height: 97px;
 text-decoration: none;
 transition: border-bottom-color 0.5s ease-in-out;
 -webkit-transition: border-bottom-color 0.5s ease-in-out; 
 }
 .navbar-default{
 background-color:#fff;
 margin: 0;

 }
 .nav>li>a {
 position: relative;
 }
.navbar-default .navbar-right > li > a {
 padding-left: 70px;
 padding-right: 1px;
 }
.navbar-default .navbar-toggle .icon-bar {
 background-color: #000000;
 margin:0 0 4px;
 width: 25px;
 height: 5px;

}
 .nav.navbar-nav > li{
 display: :inline-block;
 }
 .nav.navbar-nav{
 list-style-type:none;
 }
 .nav.navbar-nav > li > a:hover{
    color:#a92419;
   border-bottom-color: #a92419;
  }

      .navbar-default .navbar-toggle .icon-bar {
       background-color:#a92419 ;
       margin:0 0 4px;
        width: 25px;
       height: 5px;

       }
       .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
        background: none;
        }
        button.navbar-toggle{
        background:none;
        border:none;
        color:#000;
        }

Answer 1

您可以将您的图像包装在一个锚标记中，并给它一个 navbar-brand 类，并给图像一个 id。

    <a class="navbar-brand" href="#"><img id="logo" src="logo.png"></a>

navbar-brand 类将有助于赋予它响应能力，您可以使用 id #logo 来控制图像大小和位置，或者您可以将图像的宽度和高度指定为如下属性：

 <a class="navbar-brand" href="#"><img id="logo" src="logo.png" height="42" width="42"></a>

只需将数字更改为您想要的大小即可。查看此链接以引导有关将 navbar-brand 类用于图像的讨论。 http://getbootstrap.com/components/#navbar-brand-image