导航栏上的响应品牌形象

问题描述 投票:1回答:1

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

这是没有最小化时的图像.enter image description here

这是最小化时的图像,因为您可以看到图片被折叠按钮按下。 enter image description here

这是我的导航栏的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;
        }
html css image twitter-bootstrap
1个回答
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

© www.soinside.com 2019 - 2024. All rights reserved.