导航栏和 div 之间不需要的空间(红色) [英] unwanted space between navigation bar and div(red color)

查看：28
本文介绍了导航栏和 div 之间不需要的空间(红色)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在红色 div 和标题之间出现了这样一个不需要的空间我的 html 是我为 html 和 body 的边距和填充提供了 0 值.但仍然存在问题，请帮忙

 
<nav role="navigation" class="navbar navbar-fixed navbar-inverse"><!-- 品牌和切换被分组以获得更好的移动显示--><div class="navbar-header"><button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle nav-button"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a href="#" class="navbar-brand">示例</a>

<!-- 用于切换的导航链接和其他内容的集合--><div id="navbarCollapse" class="collapse navbar-collapse"><ul class="nav navbar-nav nav-ul"><li id="tech" class="nav-list"><a href="#">home</a></li><li id="politics" class="nav-list"><a href="#">职业</a></li><li id="crime" class="nav-list"><a href="#">关于</a></li><li id="business" class="nav-list"><a href="#">联系方式</a></li>

</nav></标题><section class="frontpage"><div class="容器"><div class="row"><div class="col-md-5">

</节>

<div class="容器"><div class="row"><div class="col-md-5">

</节>

和 css 是我也试过为 div 和 header 提供 0 填充和边距

 body,html {保证金:0;填充:0;}标题{保证金:0;填充:0;}.首页{背景:红色；高度:200px；保证金:0;填充:0;}.ghi{背景:蓝色；高度:220px；}

解决方案

使用它

.navbar{边距底部:0！重要；}

body,html {}标头{}.首页{背景:红色；高度:200px；}.ghi{背景:蓝色；高度:220px；}.导航栏{边距底部:0！重要；}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/><标题><nav role="navigation" class="navbar navbar-fixed navbar-inverse"><!-- 品牌和切换被分组以获得更好的移动显示--><div class="navbar-header"><button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle nav-button"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a href="#" class="navbar-brand">示例</a>

<!-- 用于切换的导航链接和其他内容的集合--><div id="navbarCollapse" class="collapse navbar-collapse"><ul class="nav navbar-nav nav-ul"><li id="tech" class="nav-list"><a href="#">home</a></li><li id="politics" class="nav-list"><a href="#">职业</a></li><li id="crime" class="nav-list"><a href="#">关于</a></li><li id="business" class="nav-list"><a href="#">联系方式</a></li>

</nav></标题><section class="frontpage"><div class="容器"><div class="row"><div class="col-md-5">

</节>

<div class="容器"><div class="row"><div class="col-md-5">

</section>

I am getting an unwanted space like this between red color div and header my html is i've give 0 value for margin and padding for html and body.But still there's a problem please help

 <header>

    <nav role="navigation" class="navbar navbar-fixed navbar-inverse">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle nav-button">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Example</a>
    </div>

    <!-- Collection of nav links and other content for toggling -->

    <div id="navbarCollapse" class="collapse navbar-collapse">

        <ul class="nav navbar-nav nav-ul">

           <li id="tech" class="nav-list">         <a href="#">home</a></li>
           <li id="politics" class="nav-list">     <a href="#">careers</a></li>
           <li id="crime" class="nav-list">        <a href="#">about</a></li>
           <li id="business" class="nav-list">     <a href="#">contact</a></li>


        </ul>

    </div>

    </nav>

</header>

<section class="frontpage">
    <div class="container">
        <div class="row">
              <div class="col-md-5">

              </div>

        </div> 
    </div>
</section>
<section class="ghi">
    <div class="container">
        <div class="row">
              <div class="col-md-5">

              </div>

        </div> 
    </div>
</section>

and css is i've also tried giving 0 padding and margins for div and header

       body,html {
          margin:0;
         padding:0;
          }
       header{
         margin:0;
         padding:0;
         }  
      .frontpage{
          background:red;
       height:200px;
       margin:0;
       padding:0;
       }
      .ghi{
         background:blue;
          height:220px;

        }

解决方案

use it

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


body,html {}
header{}  
.frontpage{
 background:red;
   height:200px;       
}
.ghi{
  background:blue;
height:220px;
}

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

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />

<header>

    <nav role="navigation" class="navbar navbar-fixed navbar-inverse">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle nav-button">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Example</a>
    </div>

    <!-- Collection of nav links and other content for toggling -->

    <div id="navbarCollapse" class="collapse navbar-collapse">

        <ul class="nav navbar-nav nav-ul">

           <li id="tech" class="nav-list">         <a href="#">home</a></li>
           <li id="politics" class="nav-list">     <a href="#">careers</a></li>
           <li id="crime" class="nav-list">        <a href="#">about</a></li>
           <li id="business" class="nav-list">     <a href="#">contact</a></li>


        </ul>

    </div>

    </nav>

</header>

<section class="frontpage">
    <div class="container">
        <div class="row">
              <div class="col-md-5">

              </div>

        </div> 
    </div>
</section>
<section class="ghi">
    <div class="container">
        <div class="row">
              <div class="col-md-5">

              </div>

        </div> 
    </div>
</section>

这篇关于导航栏和 div 之间不需要的空间(红色)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆