导航栏和内容之间的空间

Posted 2023-03-06

【中文标题】导航栏和内容之间的空间

【英文标题】：Space between navbar and the content

【发布时间】：2016-08-16 20:20:23

【问题描述】：

我想摆脱内容和导航栏之间的空间，我该怎么做？请告诉我如何做到这一点，我是 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;

 

【问题讨论】：

.navbar-default margin : 0 !important;

如何将您的答案标记为正确答案？

【参考方案1】：

.navbar-default margin : 0 !important;

【参考方案2】：

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

.navbar margin-bottom: 0;

您也可以在内容类上设置负边距，但这有点小技巧。

.content margin-top: -20px;

祝你好运。

【参考方案3】：

在 bootstrap 4 中，一个新的 mb-3 类被添加到导航栏（参见最后一个类）

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

这增加了一个保证金底部。有关详细信息，请参阅this answer。我刚刚删除了那个类。

【参考方案4】：

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

【参考方案5】：

好的，对于其他任何人，他们可能会寻找可能的答案。我不一定完全按照我想要的方式解决问题，我确信还有其他解决方案，但对我来说这是有效的：

1) 转到外观 > 编辑器

2) 点击“主题功能”

3) 查找名为 mbe_wp_head() 的函数并找到如下所示的行：

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

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

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

【参考方案6】：

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