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

Question

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

这是未最小化时的图像。

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

这是我的导航栏 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

您可以将您的图片包裹在 anchor 标记中，并为其指定一个 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>

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