更改bootstrap导航样式以删除导航下方的填充?

时间:2014-03-07 06:07:57

标签: html css twitter-bootstrap

我无法摆脱设计为引导程序nav的填充。

我的nav

有以下相关标记
<nav id="menu" class="navbar navbar-default" role="navigation">

我试过了:

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

还有:

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

这就是它的显示方式:

enter image description here

所以我希望div下方的蓝色nav显示任意填充。

我怎样才能得到它?

这是我在navdiv下面的整个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>

2 个答案:

答案 0 :(得分:2)

.navbar {
   margin-bottom: 0px;
}

答案 1 :(得分:1)

因为边距不是填充。只需写下你的css:

.navbar {margin-bottom:0px;}

Demo