简体   繁体   English

如何使标题和徽标响应?(Bootstrap)

[英]How to make header and logo responsive?(Bootstrap)

Ok,i made header and logo : 好的,我制作了标题和徽标:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="test2.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>


    <div class="navbar navbar-default " role="navigation">
     <div class="container-fluid">

      <div class="navbar-header">
        <button class="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle Navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img src="images/test1.png" class="img-fluid"></a>
      </div>

    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
      </ul>
   </div>

 </div>
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

and CSS: 和CSS:

.navbar-nav {
min-height: 110px;
}

.navbar-brand img {
  max-width: 100%;
  height: auto;
}

The question is how to my logo image be responsive as I resize the browser and how to header be responsive(when decrease size)? 问题是如何在我调整浏览器大小以及如何响应标题(减小尺寸时)时,我的徽标图像是否响应? As you can see I put height in external CSS file 110px,and now I want to logo enter inside header(like in full size browser) when resize into small screens. 正如您所看到的,我将高度放在外部CSS文件110px中,现在我想在调整大小到小屏幕时将徽标输入内部标题(如在全尺寸浏览器中)。 I hope you get it 我希望你明白

To keep your header image inside your header at all times you can simply apply max-height: 100%; 要始终将标题图像保留在标题内,您只需应用max-height: 100%; to your image. 对你的形象。 This will stop it from overflowing its container. 这将阻止它溢出其容器。 Here is an example: https://jsfiddle.net/rktr4q5v/1/ 这是一个例子: https//jsfiddle.net/rktr4q5v/1/

You can see that the images are both quite small. 你可以看到图像都非常小。 This is because the class navbar-brand has a height of 50px applied. 这是因为类navbar-brand的高度为50px。 If you remove this then your images will expand to their original width but remain inside the navbar. 如果删除此图像,则图像将扩展到原始宽度,但仍保留在导航栏内。 Here is an example of this: https://jsfiddle.net/rktr4q5v/2/ 这是一个例子: https//jsfiddle.net/rktr4q5v/2/

If you need to do specific size styling for your logos then you will need to use media queries to change the size of your logo at different screen widths. 如果您需要为徽标执行特定大小样式,则需要使用媒体查询来更改不同屏幕宽度的徽标大小。 The documentation for this can be found here and a beginners guide can be found here 可在此处找到文档,可在此处找到初学者指南

I have also fixed some of your mistakes. 我还修正了你的一些错误。 You can refer this. 你可以参考这个。

Adjust your Logo Size in navbar-brand style tag. 在导航栏品牌样式标签中调整徽标大小。 If requires 如果需要

 <!DOCTYPE html> <html lang="en"> <head> <title>Test</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="test2.css"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="navbar navbar-default " role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" class="img-responsive img-rounded" style="max-height: 40px; margin-top: -15%;"></a> </div> <div class="navbar-collapse collapse navbar-right"> <ul class="nav navbar-nav"> <li><a href="#">HOME</a></li> <li><a href="#">LINK</a></li> <li><a href="#">LINK</a></li> <li><a href="#">LINK</a></li> <li><a href="#">LINK</a></li> </ul> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM