Question

发布之后，我遇到了更多问题，让我的标题响应更快。我希望使用浏览器正确地重新调整标题图像（徽标），并在移动设备上正确显示。

像重新调整大小时的网页一样：http://timeandspace.org/

这里是小提琴链接：www.jsfiddle.net/0m4z6u25 /

如何让导航栏与上面链接的网站做同样的提示将是一个巨大的帮助！

由于

Answer 1

使用媒体查询，您需要根据屏幕宽度调整标题图像的大小。然后，您可以控制大小，使其保持成比例，然后您可以在移动设备上显示不同的布局徽标 - 例如将'student's union'放在圆圈下。这不会太小，而且在移动设备上看起来不错。

媒体查询的示例：

@media (min-width: 900px) {}

Bootstrap还有一些响应式类，例如visible-xs hidden-xs，可以在这里提供帮助。

Answer 2

首先更新bootstrap.css的版本，使用最新的stable to date（v3.3.6）。

CDN链接

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css

接下来，您需要对导航条代码进行大量更改。我已根据您的要求进行了更改。这里

<!--HEADER-->                      
<div class="header">
  <div id="header-container" class="container">
    <div class="headerdiv">
      <a href="" class="headerleft">
        <img src="http://i.imgur.com/DotvQDw.jpg" class="img-fluid" alt="header SU">
      </a>
    </div>     
  </div>
</div> 

  <nav class="navbar navbar-default" id="nav-main">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <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 alt="Brand" width="20" height="20" src="img/nav_logo.jpg">
          </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Help</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Forums</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Search</button>
            </form>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

，CSS是

/* Stylesheet */

html, 
body {

height:100%;    
}

img {
    max-width: 100%;
}


/* Salford SU Header */

.headerbox {
    height: 200px;
    width: 100%;
    background-color:white;
}


#header-container{
    padding-left: 140px;
    padding-right: 140px;
}



.headerdiv {
    height: 200px;
    width:100%;
    padding-top: 0px;
    padding-bottom: 17px;
    padding-left: 65px;
    padding-right: 65px;
}

.headerleft {
    height: 146px;
    min-width:400px;
    width: 50%;
    float: left;
    padding-right: 15px;
    background-position: center left;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
}

.header-right {
    width: 40%;
    height: 146px;
    float: right;
    border-left: 2px solid #c5c6c8;
    padding-left: 15px;
}

.headerright1 
{
    height: 40px;
    width: 100%;
    text-align: justify;
    vertical-align: bottom;
    padding-top: 7px;
}

.headerright1 > a {
    width: 34px;
    display: inline-block;
    vertical-align: bottom;
    zoom: 1;
}


/*
#cover {
    background:#222 url('img/header.jpg') center center no-repeat;
    background-size:cover;
    color:white;
    height: 24.5%;
    text-align:center;
    display:flex;
    align-items:bottom;
}
*/


 /*NAVIGATION CSS*/
#nav-main {
    background: #ed1e24;
}

#nav-main li {
    font-family: 'Work Sans', sans-serif;
    font-size: 18px;
    color:white;
}

.section-content {
    padding: 5rem 0;
}

#about {
    background: url('img/working.jpg') center center no-repeat;
}

.about-text{
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 1.875rem;
}

#footer-main {
    background: #f1163e;
    color:white;
    font-size: 0.8rem;
    padding: 2.5rem 0;
}



@media (min-width: 158px) and (max-width: 600px) {
#header-container {
    padding-left: 0%;
    padding-right: 0%;
}

    .headerleft {
        background-position: center left;
        background-size: contain;
        background-repeat: no-repeat;
        display: block;
        min-width: 100%;
        min-height: 100%;
    }

    .headerleft > a {
        max-width: 100%;
        max-height: 100%;
        background-position: center left;
        background-size: contain;
        background-repeat: no-repeat;
        display: block;
        min-width: 100%;
        min-height: 100%;
    }
}

Fiddle

响应头图像（Bootstrap 3/4）

2 个答案: