导航栏和内容之间的空间

Question

我想摆脱内容和导航栏之间的空间我该怎么办？让我知道如何做到这一点请新的CSS和HTML。我也试过它在图像滑块上的wordpress在导航栏和图像滑块之间有空间我怎么摆脱它？谢谢你提前。

这是我的导航栏和内容的html代码。

  <nav class="navbar navbar-default navbar-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
            <span class="icon-bar" ></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>  
        </button>
        <img class="img-responsive" src="images/brandz.png" >
    </div>

<div class="collapse navbar-collapse" id="nav-collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Students</a></li>
        <li><a href="#">Faculty</a></li>
        <li><a href="#">Contact us</a></li>

    </ul>

    <ul class="nav navbar-nav navbar-right">
                <li><a data-toggle="modal" href="#myModal" ><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                <!-- Modal -->
                    <div id="myModal" class="modal fade" role="dialog">
                        <div class="modal-dialog">
                <!-- Modal content--> 
                         <div class="modal-content">
                             <div class="modal-header"> 
                                 <button type="button" class="close" data-dismiss="modal">&times;</button>
                             </div>
                             <div class="modal-body">
                                <p>Some text in the modal.</p>
                             </div>
                             <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                             </div>
                         </div>
                        </div>
                   </div>
    </ul>
  </div>
  </div>
  </nav>
  <div class="content">
 Pellentesque habitant morbi tristique senectus et netus et malesuada fames     ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor   sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
     </div>

这是我的css

 .navbar-default .navbar-nav > li > a {
 font-weight: 590;
 color: #949494;
 display: block;
 padding: 5px 35px 2px 45px;
 border-bottom: 3px solid transparent;
 line-height: 97px;
 text-decoration: none;
 transition: border-bottom-color 0.5s ease-in-out;
 -webkit-transition: border-bottom-color 0.5s ease-in-out; 
  }
.navbar-default{
background-color:#fff;

}
  .nav>li>a {
  position: relative;
  }
 .navbar-default .navbar-right > li > a {
 padding-left: 70px;
 padding-right: 1px;
 }
.navbar-default .navbar-toggle .icon-bar {
 background-color: #000000;
 margin:0 0 4px;
 width: 25px;
 height: 5px;

}
@media (max-width: 768px) {
.img-responsive{
 width: 300px;
 height:50px;
 padding-left:50px;
 }
 }
 @media (max-width: 376px) {
 .img-responsive{
 width: 220px;
 height:50px;
 padding-left: 20px;
}
}
@media (max-width: 286px) {
.img-responsive{
 width: 180px;
 height:50px;
 padding-left: 5px;
}
}
 .nav.navbar-nav > li{
 display: :inline-block;
  }
 .nav.navbar-nav{
  list-style-type:none;
  }
  .nav.navbar-nav > li > a:hover{
  color:#a92419;
  border-bottom-color: #a92419;
  }

.navbar-default .navbar-toggle .icon-bar {
 background-color:#a92419 ;
 margin:0 0 4px;
 width: 25px;
 height: 5px;

 }
 .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover            {
 background: none;
 }
 button.navbar-toggle{
 background:none;
 border:none;
 color:#000;

 }

Answer 1

.navbar-default { margin : 0 !important; }

Answer 2

默认情况下，navbar类的底边距为20px。这就是在导航栏区域下创建空间的原因。您可以在自己的样式表中覆盖它。只需将其添加到您的CSS：

.navbar {margin-bottom: 0;}

您还可以在内容类上设置负边距，但这有点像黑客。

.content {margin-top: -20px;}

祝你好运。

Answer 3

尝试在内容类上将边距设置为零。

Answer 4

在引导程序4中，将新的mb-3类添加到导航栏（请参阅上一类）

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">

其中添加了“保证金底部”。有关更多详细信息，请参见this answer。我刚刚删除了该课程。

Answer 5

好的， ANYONE ELSE 可能会搜索可能的答案。我没有必要完全按照我想要的方式解决问题，而且我确定还有其他解决方案，但对我来说这才有效：

1）转到外观＆gt;编辑

2）点击＆＃34;主题功能＆＃34;

3）寻找名为 mbe_wp_head（）的函数，找到如下所示的行：

    .'body{ padding-top: 42px !important; }'

并将padding-top属性更改为适合您设计的任何内容。

我知道，这可能不是最好的解决方案，它可能不适用于所有人（个人而言，我使用的是自助主题），但它对我有用，如果我找到一个更好的解决方案，我可以使用它。发布它。

Answer 6

对我来说，空格是由<h1>标签引起的。然后，我将<h1>更改为<p>标记并更改了字体大小。这帮助我摆脱了导航栏和页面内容之间的空间。