Question

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

我把身体留下了黑色，所以想法就是加入div并删除它们之间的黑色。

＆＃13;

<!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>

＆＃13;

Answer 1

所有这些边距都在您在页面中链接的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>

Answer 2

导航解决方案：
如果你参考bootstrap的官方指南。 Bootstrap团队使用了＆＃34; .bs-docs-nav＆＃34;将它包裹在导航中以去除边距。

col margin的解决方案：
尝试在＃34;井＆＃34;中包裹cols。它将删除黑色部分。例如：

 div class="row content well"

引导程序和HTML中div之间的不需要的空格

2 个答案: