正文 

当前位置： 首页 > 问答 >

导航栏和内容之间的空间

     2023-03-06     176

关键词：

【中文标题】导航栏和内容之间的空间【英文标题】：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】：

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

【讨论】：

iOS：导航顶栏和 UIviewController 的其他内容之间的线

】iOS：导航顶栏和UIviewController的其他内容之间的线【英文标题】：iOS:LinebetweennavigationtopbarandothercontentsofUIviewController【发布时间】：2017-08-1216:15:45【问题描述】：我使用Swift3和Xcode8.1创建了一个应用程序，我有一个带有导航栏的... 查看详情

xib 中的自动布局 - 子视图的高度与导航栏和标签栏之间的空间成正比

】xib中的自动布局-子视图的高度与导航栏和标签栏之间的空间成正比【英文标题】：AutoLayoutinxib-Subview\'sheightproportionaltospacebetweennavigationbarandtabbar【发布时间】：2015-10-0823:03:40【问题描述】：在xib中工作时，您将如何做到这一点... 查看详情

SwiftUI 导航视图在内容之前没有足够的空间

】SwiftUI导航视图在内容之前没有足够的空间【英文标题】：SwiftUINavigationViewdoesn\'thaveenoughspacebeforecontent【发布时间】：2021-07-1908:35:47【问题描述】：我有一个SwiftUI导航视图，里面的内容视图在导航栏和内容之间有非常小的空间... 查看详情

导航栏和第一个 UITableViewCell 之间的差距

】导航栏和第一个UITableViewCell之间的差距【英文标题】：GapbetweennavigationbarandfirstUITableViewCell【发布时间】：2020-09-0301:02:29【问题描述】：我有一个UITableViewController，导航栏中嵌入了一个搜索控制器。当视图以模态显示时，第一... 查看详情

Bootstrap 4 导航栏和内容填充高度 flexbox

】Bootstrap4导航栏和内容填充高度flexbox【英文标题】：Bootstrap4Navbarandcontentfillheightflexbox【发布时间】：2018-08-1722:03:09【问题描述】：我必须创建一个布局，其中内容网格必须位于整个剩余页面上，但该布局还有一个导航栏。为了... 查看详情

iOS 6 上出现导航栏和表格视图之间的黑条

】iOS6上出现导航栏和表格视图之间的黑条【英文标题】：BlackbarbetweennavigationbarandtableviewappearsoniOS6【发布时间】：2012-09-2220:44:33【问题描述】：自从我开始使用iOS6后，我似乎遇到了一个问题，在使用iOS5时没有出现。起初我以为... 查看详情

导航栏和 ViewControllers 视图之间的 NSLayoutConstraint

】导航栏和ViewControllers视图之间的NSLayoutConstraint【英文标题】：NSLayoutConstraintbetweenNavigationBar&ViewControllersView【发布时间】：2013-06-1220:54:42【问题描述】：我们能否在self.navigationcontroller.navigationbar和self.view之间添加一个NSLayoutCo... 查看详情

iOS：状态栏和导航栏：空格或底层

】iOS：状态栏和导航栏：空格或底层【英文标题】：iOS:StatusbarandNavigationbar:SpaceorUnderlaying【发布时间】：2013-08-0513:26:57【问题描述】：如何以规范的方式操作状态栏和导航？所以，我的目标是同时隐藏和显示状态栏和导航栏。我... 查看详情

在状态栏和导航栏之间添加图片

】在状态栏和导航栏之间添加图片【英文标题】：Addimagebetweenstatusbarandnavigationbar【发布时间】：2014-03-2904:19:56【问题描述】：我正在尝试在IOS的状态栏和导航栏之间添加图像。这可能吗？您能指导我如何实现这一目标吗？基本... 查看详情

导航栏和视图之间的分隔符 - iOS 7

】导航栏和视图之间的分隔符-iOS7【英文标题】：Separatorbetweennavigationbarandview-iOS7【发布时间】：2013-09-2016:01:06【问题描述】：在iOS7中，导航栏和视图之间有一个灰色分隔符。在iOS6中，没有那条水平线，因此视图会与导航栏融为... 查看详情

在 UITabBarController 中的标签栏和导航视图之间添加 UIView

】在UITabBarController中的标签栏和导航视图之间添加UIView【英文标题】：AdddingUIViewbetweentabBarandNavigationviewinUITabBarController【发布时间】：2019-06-0709:16:52【问题描述】：我正在开发一个项目，该项目使用UITabBarController来显示所有不同... 查看详情

导航栏和粘性 Bootstrap 页脚之间的 100% 高度

】导航栏和粘性Bootstrap页脚之间的100%高度【英文标题】：100%heightbetweennavbarandstickyBootstrapfooter【发布时间】：2015-11-1520:18:23【问题描述】：在这个项目http://fiddle.jshell.net/e43duahb/我希望类apresentacao的div的窗口高度小于页脚的100像... 查看详情

固定导航栏下方的 MUI 应用栏和模糊内容

】固定导航栏下方的MUI应用栏和模糊内容【英文标题】：MUIAppbarandblurcontentbelowfixedNavbar【发布时间】：2021-07-2909:37:21【问题描述】：有没有办法改变我的material-uiAppBar组件的背景属性来模糊固定导航栏的内容？我已经尝试了过滤... 查看详情

移动开发中导航栏和搜索栏在设计中应该注意哪些问题？

参考技术A一、导航栏位置在iOS上，导航栏是指显示在应用程序顶部，位于状态栏下方的容器区域，层级应高于当前页面内容。在安卓上，Google公司在MaterialDesign中也赋予了它同样的定义，但是却给了它另一个名称，顶部应用栏（... 查看详情

在 iPad 中旋转全屏视频时，导航栏和状态栏之间出现奇怪的重叠错误

】在iPad中旋转全屏视频时，导航栏和状态栏之间出现奇怪的重叠错误【英文标题】：StrangeoverlappingbugbetweennavigationandstatusbarswhenrotatingfullscreenvideosiniPad【发布时间】：2011-10-0523:04:03【问题描述】：我在我的应用程序中实现了一个... 查看详情

使用 iOS 7 ***布局指南

...我正在我的故事板中设计一个视图控制器。它包含顶部的导航栏和内容视图。我已将约束设置为导航栏顶部空间到顶部布局指南=0内容视图填充剩余空间（超级视图的前导和尾随空间=0；超级视图的底部空间=0，导航栏的顶部空间... 查看详情

Swift - 使用导航栏和标签栏获取 viewController 的大小

】Swift-使用导航栏和标签栏获取viewController的大小【英文标题】：Swift-getsizeofviewControllerwithnavigationbarandtabbar【发布时间】：2017-04-0419:01:22【问题描述】：我的viewController有导航栏和标签栏。在减去导航和标签栏的大小后，我需要... 查看详情

导航栏和图像显示之间的线(代码片段)

我试图让它成像，因此图像就在导航栏后面，导航栏位于图像的顶部，尽管图像必须从页面顶部开始，就像导航栏一样，我不知道为什么它在它们之间显示这条白线。这是一个有角度的6网站（在这种情况下并不重要），我正在... 查看详情