Question

我真的希望我的导航栏缩放到屏幕，因为屏幕变小，字体和图像也变小。有帮助吗？有点像https://devmounta.in/导航栏，就像图像缩放和文本一样。

HTML：

 <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <div class="logo">
        <a class="navbar-brand" href="#"><img src="css/images/logo.png"></a>            
      </div>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">About</a></li>
        <li><a href="#">Stats</a></li>
        <li><a href="#">Drivers</a></li> 
        <li><a href="#">Contact</a></li>
        <li id="btn"><a href="#">Pledge Now</a></li> 
      </ul>
    </div>
  </div>
</nav>

CSS：

.navbar-default {
 background: 0 0;
 border: none;
 border-radius: 0;
 margin-bottom: 0;
}

.container-fluid {
 padding: 0;
 width: 90%;
 margin: 0 auto;
}

.navbar-brand, .navbar-nav li a {
 line-height: 85px;
 height: 85px;
 padding-top: 0;
}

.navbar-default .navbar-brand {
 color: #FFF;
 font-family: 'Ubuntu', sans-serif;
 font-weight: 500;
 font-size: 28px;
 text-transform: uppercase;
}

.navbar-default .navbar-nav>li>a {
 color: #FFF;
 font-size: 18px;
 font-family: 'Ubuntu', sans-serif;
 font-weight: 500;
 position: relative;
 text-decoration: none;
 display: inline;
 padding: 0;
 margin-left: 15px;
 margin-right: 15px;
 text-transform: uppercase;
}

.logo {
 width: auto;
 height: 85px;
 }

.logo img {
 height: 45px;
 line-height: 45px;
 display: inline-block;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
 color: #84CF96;  
 -webkit-transition: .5s ease;
 -moz-transition: .5s ease;
 -o-transition: .5s ease;
 transition: .5s ease;
}

.navbar-default .navbar-nav  a:before {
 content: "";
 position: absolute;
 width: 100%;
 height: 2px;
 margin-bottom: -10px;
 bottom: 0;
 left: 0;
 background-color: #84CF96;
 visibility: hidden;
 -webkit-transform: scaleX(0);
 transform: scaleX(0);
 -webkit-transition: all 0.3s ease-in-out 0s;
 transition: all 0.3s ease-in-out 0s;
 }

.navbar-default .navbar-nav a:hover:before {
 visibility: visible;
 -webkit-transform: scaleX(1);
 transform: scaleX(1);
}

#btn a{
 border: 1px solid #F5F5F5;
 padding: 10px;
}

#btn a:hover:before {
 visibility: hidden;
 -webkit-transform: scaleX(1);
 transform: scaleX(1);
 }

#btn a:hover , #btn a:focus{
 color: #FFF;
 background-color: #84CF96;
 border-color: #84CF96; 
 -webkit-transition: .5s ease;
 -moz-transition: .5s ease;
 -o-transition: .5s ease;
 transition: .5s ease;
}

移动CSS：

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
 .navbar-default {
    background-color: #84CF96;
 }

 .navbar-default .navbar-toggle {
    border: 0;
    float: left;
    margin-top: 23.5px;
 }

 .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #6AA678;
 }

 .navbar-default .navbar-toggle .icon-bar {
    background-color: #FFF;
    width: 25px;
    height: 4px;
 }

 .navbar-default .navbar-brand {
    float: right;
 }

 .navbar-nav {
    margin: 0;
    text-align: center;
 }

 .navbar-default .navbar-nav>li>a {
    display: block;
    border-bottom: 1px solid #6AA678;
    margin: 0;
    height: 60px;
    line-height: 60px;
 }

 .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #FFF;  
    -webkit-transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    transition: .5s ease;
 }

 .navbar-default .navbar-nav > li:hover, .navbar-default .navbar-nav > li:focus {
    background-color: #6AA678;  
    -webkit-transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    transition: .5s ease;
 }  

 #btn{
    display: none;
 }

 .navbar-collapse.in {
    overflow-y: visible;
    margin-bottom: 20px;
    padding: 0;
 }

 .navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #6AA678;
 }

}

Answer 1

我不确定这是否适用于您的情况，但您可以尝试将图片宽度从“自动”更改为“100％”：

.logo {
    width: 100%;
     ....
}

.logo img {
   width: 100%;
    ...
}

这通常适用于图像，因此可能适用于您的导航。

希望它有所帮助！

Bootstrap Auto-Scaling导航栏

1 个答案: