使用媒体查询在手机上重新定位徽标

Question

我在使用 Bootstrap 的媒体查询时遇到了一些问题。目前，我有一个固定顶部的导航栏，其徽标居中位于链接上方，如下所示：

当菜单折叠时，徽标被推到下方，如下所示：

我也希望徽标在较小的屏幕上垂直居中，所以我创建了一个媒体查询来调整 margin-top，但它不起作用。

代码如下：

body {
  padding-top: 40px;
  font-family: Consolas, monaco, monospace;
  color: #303030;
  padding-right: 80px;
  padding-left: 80px;
}


/* Add a dark background color with a little bit see-through */

.navbar {
  position: relative;
  margin-bottom: 0;
  background-color: #303030;
  border: 0;
  font-size: 12px !important;
  letter-spacing: 4px;
  opacity: .9;
}

.navbar-nav {
  float: none;
  margin: 0 auto;
  display: block;
  text-align: center;
}

.navbar-nav>li {
  display: inline-block;
  float: none;
  padding-top: 70px;
}

.navbar-fixed-top {
  position: fixed !important;
}

@media screen and (max-width: 480px) {
  .navbar-brand {
    margin-top: -50px;
  }
}

.navbar-brand {
  position: absolute;
  left: 50%;
  margin-left: -100px !important;
  margin-top: -15px !important;
  display: block;
  padding-top: 30px
}

.navbar-toggle {
  z-index: 3;
}

.navbar-center {}


/* Add a gray color to all navbar links */

.navbar li a,
.navbar .navbar-brand {
  color: #beb5ac !important;
}


/* On hover, the links will turn white */

.navbar-nav li a:hover {
  color: #ded8d2 !important;
  transition: color 1s ease;
}


/* The active link */

.navbar-nav li.active a {
  color: #fff !important;
  background-color: #29292c !important;
}


/* Remove border color from the collapsible button */

.navbar-default .navbar-toggle {
  border-color: transparent;
}

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen">
  <link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5">
  <link rel="stylesheet" type="text/css" href="/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="teste3.css">
  <link rel="stylesheet" href="flexbox-footer.css">
</head>

<body class="Site">

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header navbar-header-center">
        <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>
        <a class="navbar-center navbar-brand" href="./teste3.html">
          <img src="https://s22.postimg.org/stryqb4xd/logo.png" style="max-width:180px;"></a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="index"><a href="teste3.html">INÍCIO</a></li>
          <li class="sobre"><a href="teste3_about.html">SOBRE</a></li>
          <li class="ilustracao"><a href="teste3.html#ilustracao">ILUSTRAÇÃO</a></li>
          <li class="design"><a href="teste3.html#design">DESIGN GRÁFICO</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type='text/javascript' src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="lib/jquery.mousewheel.pack.js?v=3.1.3"></script>
  <script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
  <script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
  <script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
  <script type="text/javascript" src="fancybox.js"></script>
  <script type="text/javascript" src="scroll.js"></script>
</body>

</html>

尝试了几件事，但无法正常工作。可能有些愚蠢。谢谢！

Fiddle: https://jsfiddle.net/resch/5knzdsL0/

Answer 1

您必须将 !important 添加到您的 padding-top，因为 class 已经退出并且它的优先级高于您的。

.navbar-brand {
  position: absolute;
  left: 50%;
  margin-left: -100px !important;
  margin-top: -15px !important;
  display: block;
  padding-top: 30px !important;
}

编辑：

body {
  padding-top: 40px;
  font-family: Consolas, monaco, monospace;
  color: #303030;
  padding-right: 80px;
  padding-left: 80px;
}


/* Add a dark background color with a little bit see-through */

.navbar {
  position: relative;
  margin-bottom: 0;
  background-color: #303030;
  border: 0;
  font-size: 12px !important;
  letter-spacing: 4px;
  opacity: .9;
}

.navbar-nav {
  float: none;
  margin: 0 auto;
  display: block;
  text-align: center;
}

.navbar-nav>li {
  display: inline-block;
  float: none;
  padding-top: 70px;
}

.navbar-fixed-top {
  position: fixed !important;
}

@media screen and (max-width: 480px) {
  .navbar-brand {
    margin-top: -50px;
  }
}

.navbar-brand {
  position: absolute;
  left: 50%;
  margin-left: -100px !important;
  margin-top: -15px !important;
  display: block;
  padding-top: 30px !important;
}

.navbar-toggle {
  z-index: 3;
}

.navbar-center {}


/* Add a gray color to all navbar links */

.navbar li a,
.navbar .navbar-brand {
  color: #beb5ac !important;
}


/* On hover, the links will turn white */

.navbar-nav li a:hover {
  color: #ded8d2 !important;
  transition: color 1s ease;
}


/* The active link */

.navbar-nav li.active a {
  color: #fff !important;
  background-color: #29292c !important;
}


/* Remove border color from the collapsible button */

.navbar-default .navbar-toggle {
  border-color: transparent;
}

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen">
  <link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5">
  <link rel="stylesheet" type="text/css" href="/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="teste3.css">
  <link rel="stylesheet" href="flexbox-footer.css">
</head>

<body class="Site">

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header navbar-header-center">
        <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>
        <a class="navbar-center navbar-brand" href="./teste3.html">
          <img src="logo.png" style="max-width:180px;"></a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="index"><a href="teste3.html">INÍCIO</a></li>
          <li class="sobre"><a href="teste3_about.html">SOBRE</a></li>
          <li class="ilustracao"><a href="teste3.html#ilustracao">ILUSTRAÇÃO</a></li>
          <li class="design"><a href="teste3.html#design">DESIGN GRÁFICO</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type='text/javascript' src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="lib/jquery.mousewheel.pack.js?v=3.1.3"></script>
  <script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
  <script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
  <script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
  <script type="text/javascript" src="fancybox.js"></script>
  <script type="text/javascript" src="scroll.js"></script>
</body>

</html>

编辑 2：

将 padding-top 设置为 18px，工作示例可以在评论部分提供的 link 中找到。

.navbar-brand {
  position: absolute;
  left: 50%;
  margin-left: -100px !important;
  margin-top: -15px !important;
  display: block;
  padding-top: 18px !important;
}

EIDT 3:

请注意两个更改，max-width 设置为 780px 以包括所有移动设备，并且添加了 paddign-top。

@media screen and (max-width: 780px) {
  .navbar-brand {
    margin-top: -50px;
    padding-top: 18px !important;
  }
}

padding-top在class下面又变回30px了；

.navbar-brand {
      position: absolute;
      left: 50%;
      margin-left: -100px !important;
      margin-top: -15px !important;
      display: block;
      padding-top: 30px !important;
    }

Answer 2

您的元素处于绝对位置，请尝试给它一个最高值

@media screen and (max-width: 480px) {
  .navbar-brand {
    top:0px
  }
}

Answer 3

您需要将媒体查询移动到样式的底部 sheet 以便优先处理并将其从边距更改为填充

@media screen and (max-width: 780px) {
  .navbar-brand {
     padding-top: 15px !important;
  }
}

使用媒体查询在手机上重新定位徽标

Reposition logo on phones with media query

html

css

media-queries

twitter-bootstrap

responsive