Question

我有一个带有徽标和页面标题的导航栏，我需要标题在中间，徽标在左边

但是我有一个问题，当屏幕分辨率改变时，这不适合，徽标隐藏了我页面的标题

我的徽标必须在导航栏和页面内容之间浮动

更改屏幕分辨率时，如何调整徽标和标题以进行更改？

<nav class="navbar navbar-custom">
  <img src="http://www.smartinteriors.net/wp-content/uploads/2013/12/200x300.gif" class="logo img-fluid" alt="">
  <a class="navbar-brand title-page mx-auto">Title page</a>
</nav>

.navbar-custom {
  background-color: #A1241B;
  height: 100px;
}

.logo {
  display: inline;
  position: absolute;
  top: 1em;
}

jsfiddle

Answer 1

您可以使用此代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      margin: 0;
    }
    
    .navbar-custom {
      background-color: #A1241B;
      height: 100px;
    }
    
    .logo {
      display: inline;
      position: absolute;
      top: 1em;
    }
    
    @media only screen and (max-width: 767px) {
      .img-fluid {
        max-width: 100%;
        height: auto;
        width: 150px;
      }
    }
    
    @media only screen and (max-width: 480px) and (min-width: 320px) {
      .img-fluid {
        max-width: 100%;
        height: auto;
        width: 100px;
      }
    }
  </style>
</head>

<body>
  <nav class="navbar navbar-custom">
    <img src="http://www.smartinteriors.net/wp-content/uploads/2013/12/200x300.gif" class="logo img-fluid" alt="">
    <a class="navbar-brand title-page mx-auto">Title page</a>
  </nav>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Answer 2

这是调整屏幕大小时的解决方案。

.navbar-custom {
  background-color: #A1241B;
  height: 100px;
}

.logo {
  display: inline;
  position: absolute;
  top: 1em;
}
@media (max-width: 767px) { 
.logo {
    top: 6em;
    left: 0px;
    right: 0;
    width:100%;
    
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-custom">
  <img src="http://www.smartinteriors.net/wp-content/uploads/2013/12/200x300.gif" class="logo img-fluid" alt="">
  <a class="navbar-brand title-page mx-auto">Title page</a>
</nav>

Answer 3

您的答案在于使用@media查询。检出此链接www.w3schools.com/mediaquery.asp

使用媒体查询，您可以选择屏幕宽度，然后应用诸如flex布局之类的布局，这将使此过程更加容易。

有关弹性版式的信息，请检查此链接css-tricks.com/flex

屏幕分辨率更改时如何调整导航栏的内容

3 个答案: