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

导航栏上的响应品牌形象

1 个答案: