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

我在导航栏上的图像中遇到了问题，当我尝试将其最小化时，因为较小的图像被折叠按钮压下。是否有可能在不使用媒体查询的情况下使图片变得快速响应？因为我认为这是一个不好的做法，作为一个初学者使用媒体查询只是为了使图像变得快速响应，我认为还有其他方法可以在不使用媒体查询的情况下做到这一点:) Im新的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; 
     }

来源

2016-04-30 nethken

图像的代码在哪里？ – SEUH

图像先生没有CSS。我不知道该放什么。 – nethken

你可以用你的图像中的锚标记，并给它一个类的导航栏，品牌，并给予形象一个身份证。

<a class="navbar-brand" href="#"><img id="logo" src="logo.png"></a>

的导航栏，品牌类将有助于给它的响应，你可以使用id #logo来控制图像的大小和位置。查看此链接以引导关于使用navbar品牌类进行图片的讨论。 http://getbootstrap.com/components/#navbar-brand-image

来源

2016-04-30 17:43:05 codeKracken

这是行不通的：3 – nethken

我的形象是如此之大，你可以看到 – nethken

你需要指定你想要的图像的大小。使用#logo {width：50px; height：50px;} 50px;只是一个例子，你需要使用最适合你的高度和宽度。如果您使用px，则需要添加适当的媒体查询以使其响应。或者，您可以声明百分比而不是px。如果您使用百分比，则不需要媒体查询。 – codeKracken

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

回答

相关问题