Question

我希望导航栏中的图片能够在不使用媒体查询的情况下响应，可能吗？我是html和css的新手，我需要知道如何做到这一点。

这是最小化时的图片，折叠按钮位于顶部。

这是导航栏的html。

  <nav class="navbar navbar-default navbar-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
            <span class="icon-bar" ></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>  
         </button>
        <img class="img-responsive" src="images/brandz.png" >
        </div>

   <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

如果您可以更改代码结构，可以查看bootply DEMO

<nav class="navbar navbar-default navbar-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
            <span class="icon-bar" ></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>  
         </button>
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <img class="img-responsive" src="http://s2.hulkshare.com/song_images/original/7/0/6/706218dbe06e5490bacd92adf773c870.jpg?dd=1388552400">
     </div>....(continue your next code...)

...

Answer 2

如果您的图片采用转换SVG格式，那么感谢img-responsive

会更小

响应式图像引导程序

2 个答案: