css - Bootstrap 和 HTML 中的 div 之间不需要的空格

我正在使用 HTML、CSS 和 Bootstrap 创建一个响应式控制面板，我创建了一个导航标题，但它与主体的其余部分有很大的间距，如何删除这些 div 之间存在的空间？或者如何使我的元素的边距为 0？

我将 body 保留为黑色，所以我的想法是加入 div 并移除它们之间的黑色。

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <title>Sibcom - Layout</title>
  <meta charset="utf-8">

  <!-- ===== Arquivos css -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


</head>

<body style="background:black;">
  <div>
    <!-- ===== Página -->
    <header class=".cred">
      <nav class=" navbar navbar-default navbar-static-top navtopo">
        <div class="container">
          <div class="navbar-header">

            <!-- Collapsed Hamburger -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
								<span class="sr-only">Toggle Navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>

            <!-- Branding Image -->
            <a href="#" class="navbar-brand">

              <div class="logo-grande"> <span>System Testing </span>

            </a>

            </div>

            <div class="collapse navbar-collapse" id="app-navbar-collapse">
              <!-- Left Side Of Navbar -->
              <ul class="nav navbar-nav">
                <!--&nbsp; -->
              </ul>

              <!-- Right Side Of Navbar -->
              <ul class="nav navbar-nav navbar-right">

                <li><a href="">Perfil</a></li>
                <li><a href="">Logout</a></li>
              </ul>

            </div>
          </div>
      </nav>
    </header>

    <!-- ===== Corpo -->
    <div class="container-fluid text-center ">

      <!-- ===== Content -->
      <div class="row content ">

        <!-- ===== Menu vertical -->
        <div class="col-sm-2 sidenav " style="text-align:left;background:#DCDCDC;">
          <div>
            <h4>Bruno </h4>
            <h5>Analist</h5>
          </div>

          <hr>

          <p><a href="#">Home</a></p>
          <p><a href="#">Create</a></p>
          <p><a href="#">Os</a></p>
          <p><a href="#">E</a></p>
        </div>


        <div class="col-sm-10">

          <header class="sombra" style="background:white;color:black;padding:10px;text-align:left;">
            <h5> Home / Client /
              <h5>
          </header>

          <br>
          <div style="background:white;color:black;text-align:left;">

            <header class="sombra" style="padding:10px">
              <h3> Gerenciamento de Clientes
                <h3>
            </header>

            <div style="padding:30px">
              <!-- Formularios e Tabelas -->

              <form>

              </form>

              <!-- Formularios e Tabelas Fim -->
            </div>



          </div>


        </div>

      </div>
      <!-- ===== Content Fim -->

    </div>

    <footer class="container-fluid text-center navbar-fixed-bottom" style="background:blue;">
      <p>Sibcom 2018</p>
    </footer>

    </div>
</body>

</html>

最佳答案

所有这些边距都在您在页面中链接到的 bootstrap.css 文件中，因此您可以:

从 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css 下载未缩小的 css , 搜索您要更改的页边距并链接到更改后的版本；

在您的 html 文件(或您将链接到的其他本地 CSS)中覆盖您要更改边距的类:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
    nav.navtopo
    {
        margin-bottom: 0px;
    }
    /* etc */
</style>

关于css - Bootstrap 和 HTML 中的 div 之间不需要的空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48380980/

css - Bootstrap 和 HTML 中的 div 之间不需要的空格

上一篇：html - 我将如何更改元素的内容溢出

下一篇：css - 如何在 webpack 中配置文件路径？