如何删除Bootstrap样式按钮和表之间的空间?

时间:2014-03-18 01:17:09

标签: html css twitter-bootstrap

我有outer div,里面有3个嵌套的div。

第一个只有里面的文字,第二个有.btn .btn-primary .btn-xs的两个按钮和`.btn .btn-danger

第三个div只能进入一个.table .table-condensed的表格。

但是我在按钮div和table之间有一个不需要的空间,我尝试过使用marginpadding规则,也尝试了!important但没有得到结果。

这就是它的样子:

enter image description here

可以看出,两个按钮和下表之间有一个空格。

这是标记:

<div id="outer">
            <div id="parametros">
                <div id="tituloParametros"><span>Ingresa los puntos conocidos x,f(x)</span></div>
                <div id="botonesTabla">
                        <button type="button" id="btnAgregarPunto" class="btn btn-primary btn-xs">+</button>
                        <button type="button" id="btnEliminarPuntos" class="btn btn-danger btn-xs">Borrar</button>
                </div>
                <div id="divTablaParametros">
                    <table id="tablaParametros" class="table table-condensed"></table>
                </div>
                <input type="text" class="input-medium" placeholder="Aproximar" id="a">
                <button id="ok" type="button" class="btn btn-success btn-md">
                    <span class="glyphicon glyphicon-check"></span> Calcular y graficar
                </button>

            </div>

        <div id="resultados">
            <div id="graficos">
                <div id="bars" class="barslagrange"></div>
                <div id="fx" class="fxlagrange"></div>
                <!--<div id="pinchetabla" class="pinchetabla">Tabla inútil</div>-->
            </div>
            <div id="loquerealmenteimporta"></div>  
        </div>

    </div>

这是CSS文件:

#argumentos {

  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 100px;
  background-color: #0080FF;
  color: white;
  font-weight: bold;
}

#outer{

  padding-left: 15px;
  padding-top: 15px;
  width: 1350px; 
  height: 640px;
}

#parametros {
  float:left;
  width: 20%;
  height: 100%;
  text-align: center;
  padding-right: 5px;
  background-color: #F8F8F8;
}
      #tituloParametros {
        height: 9%;
        width: 100%;
        text-align:center;
        display: table;
      }
      #tituloParametros > span {
        display: table-cell;
        vertical-align: middle;
        font-weight: bold;
      }

      #botonesTabla {
        text-align: right;
        height: 15%;
        width: 100%;
        margin-top: 3px !important;
        margin-bottom: 2px !important;
        padding-bottom: 3px !important;
      }
      #divTablaParametros {
        margin-top: 1px !important;
        padding-top: 2px !important;  
        height: 40%;
        width: 100%;
        padding-left: 10px;
        padding-right: 7px;
        overflow-y: scroll;
      }

      .punto {
        color: black !important;
      }

      #a {
        font-weight: bold;
      }

      #ok {
        margin-top: 10px;
        font-weight: bold;
      }



#resultados {
  float:right;
  width: 80%;
  height: 100%;
  padding-left: 10px;
}

      #graficos {
        height: 75%;
        width: 100%;
      }

          .barslagrange {
            float: left;
            height: 100%;
            width: 65%;
          }

          .barsdiferencias {
            float: left;
            height: 100%;
            width: 37%;
          }          

          .fxlagrange {
            float: left;
            height: 100%;
            width: 35%;
          }

          .fxdiferencias {
            float: left;
            height: 100%;
            width: 23%;
          }                     

          .pinchetabla {
            float: left;
            height: 100%;
            width: 40%;
            background-color: orange;
          }

      #loquerealmenteimporta {
        height: 25%;
        width: 100%;
      }


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

.table-bordered {font-size: 11px;}
.table {font-size: 11px;}
.btn-argumentos {width: 350px; font-weight: bold !important;}

1 个答案:

答案 0 :(得分:1)

height: 15%;上的

#botonesTabla。你特别告诉它有一个高度,边距和填充不会改变它,改变它的高度。