Question

您好我使用bootstrap 3.3.7

处理我的Web项目

这是我的HTML代码示例：

<nav class="navbar navbar-default nobottommargin" role="navigation">
    <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <div class="collapse navbar-collapse" id="">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>

    </div>
</nav>

<iframe src="https://www.news.sky.com" style="width:100%;height:100%" frameborder="3"></iframe>

这里有JSFiddle。

正如您在示例中所看到的，导航栏和框架之间存在一些空间。

如何删除此空间？我怎样才能使iframe元素接近导航栏？

Answer 1

.navbar有一个margin-bottom: 20px;。只需使用自己的CSS类删除它：

.nobottommargin {
  margin-bottom: 0;
}

Answer 2

更改预定义的引导程序样式是不好的做法，即使使用!important。

也是如此

您只需为iframe设置负边距 - 顶部：

iframe {
   margin-top: -20px;
}

Answer 3

添加：

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

Answer 4

导航标记已设置底部边距添加到导航样式margin-bottom：0px并且它应该有效

{{1}}

Answer 5

在您的小提琴中，您已将类nobottommargin添加到导航栏，如果您随后在html中添加一些自定义CSS，则会看到边距消失。

.nobottommargin {
    margin-bottom: 0px;
}

Answer 6

需要使用自定义CSS删除margin-bottom引导程序

.nobottommargin {
  margin-bottom: 0px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default nobottommargin" role="navigation">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

<iframe src="https://www.news.sky.com" style="width:100%;height:100%" frameborder="3"></iframe>

如何删除元素之间的空格？

6 个答案: