Question

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

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

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

以下是代码：

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

尝试过几件事，但无法让它发挥作用。可能是傻事。谢谢！

小提琴：https://jsfiddle.net/resch/5knzdsL0/

Answer 1

你必须在你的填充顶部添加！important ，因为类已经退出并且它的优先级高于你的。

.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，可以在评论部分提供的链接中找到工作示例。

.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回到了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: 780px) {
  .navbar-brand {
     padding-top: 15px !important;
  }
}

Answer 3

你的元素处于绝对位置，试着给它一个最高值

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

在具有媒体查询的电话上重新定位徽标

3 个答案: