html - 更改 Bootstrap 导航样式以删除导航正下方的填充？

Question

我无法摆脱样式化为 Bootstrap nav 的内边距。

我的 nav 有以下相关标记:

<nav id="menu" class="navbar navbar-default" role="navigation">

我试过:

.navbar-default {
  padding-bottom: -20px;
  padding-top: -10px;
}

还有:

#menu {
  padding-bottom: -20px;
}

这是它的显示方式:

所以我希望蓝色 div 显示在 nav 的正下方，并带有任何填充。

我怎样才能得到它？

下面是nav 和 div 的整个 html:

<nav id="menu" class="navbar navbar-default" role="navigation">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <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="../index.html">Inicio</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="taylor.html">Aproximación de Taylor</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Aproximación de raíces<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Bisección</a></li>
                    <li><a href="">Newton Raphson</a></li>
                    <li><a href="#">Secante</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Iteración de Punto Fijo</a></li>
                  </ul>
                </li>
              </ul>

            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>


        <div id="argumentos" class="form-actions">
        <input list="funciones" type="text" autofocus placeholder="Función" id="fx">
        <datalist id="funciones">
            <option value="x**3+4*x**2-10">
            <option value="x**3-x-1">
            <option value="e**(x)+2**(-x)+2*cos(x)-6">
            <option value="e**(x)-x**2+3*x-2">
            <option value="(4*x-7)/(x-2)**2">
        </datalist>
        <input type="text" placeholder="a" id="a" style="width: 50px;">
        <input type="text" class="input-medium" placeholder="b" id="b" style="width: 50px;">
        <input type="text" class="input-medium" placeholder="tolerancia "id="tolerancia" style="width: 75px;">
        <input type="text" class="input-medium" placeholder="Iteraciones máximas" id="iteracionesMaximas" style="width: 140px;">
        <input type="text" class="input-medium" placeholder="Visión en a" id="a-vision" style="width: 75px;">
        <input type="text" class="input-medium" placeholder="Visión en b" id="b-vision" style="width: 75px;">
        <button id="ok" class="btn btn-success">Graficar</button>
        </div>

Answer 1

.navbar {
   margin-bottom: 0px;
}