El Problema

Cómo deshacerse de espaciado entre Bootstrap paneles?

Hay espacios entre mis paneles (marcada en rojo) y quiero deshacerme de ellos. He intentado hacer:

.panel {
    margin-top: 0; 
    margin-bottom: 0; 
    padding-top: 0; 
    padding-bottom:0;
}

Pero no funcionó.

Para el espacio en blanco en la parte inferior de la página, he probado la configuración de la abarcando container y #Menu a margin-bottom: 0, pero que no funcionó.

Si alguien puede que me haga saber cómo deshacerse de la separación, lo agradecería mucho!

Mi Código

HTML

<div class="panel-group" id="problem-panels">
                <div class="panel panel-default top-panel">
                    <div class="panel-heading" data-toggle="collapse" href="#collapse1">
                        <h4 class="panel-title">
                            Cox Substraction Level 1c
                        </h4> 
                    </div>
                    <div id="collapse1" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <ul class="nav nav-pills">
                                <li class="active"><a>11</a></li>
                                <li><a>12</a></li>
                                <li><a>13</a></li>
                                <li><a>14</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title" data-toggle="collapse" href="#collapse2">
                            Cox Addition Level 3b
                        </h4> 
                    </div>
                    <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">panel body 2</div>
                    </div>
                </div>
                <div class="panel panel-default bottom-panel">
                    <div class="panel-heading">
                        <h4 class="panel-title" data-toggle="collapse" href="#collapse3">
                            Cox Subtraction Level 2a
                        </h4> 
                    </div>
                    <div id="collapse3" class="panel-collapse collapse">
                        <div class="panel-body">panel body 3</div>
                    </div>
                </div>
            </div>

CSS

#problem-panels > .top-panel{
    border-top: none;
}

#problem-panels > .bottom-panel{
    border-bottom: none;
}

/*Get rid of grey border at top of panel body*/
.panel-group .panel-heading + .panel-collapse > .panel-body {
    border: none;
}

#problem-panels {
    margin-top: 20px;
}

.panel-title {
    font-weight: 600;
}

.panel-body{
    background-color: #F5F5F5;
}

JSFiddle

InformationsquelleAutor 14wml | 2016-07-14

4 Comentarios

  1. 4

    Agregar esto a tu archivo CSS. Se debe eliminar el margen extra.

    .panel-group .panel + .panel {
        margin-top: 0;
    }

    Además, usted puede también agregar una clase a sus paneles de modo que usted no cambios de cualquier otra paneles por error

    .my-panels{
        margin-top:0!important;
    }

    También es una buena idea utilizar el navegador inspector para ver qué estilos se aplican para que los elementos.

    Feliz codificación!

    • En realidad nvm, funcionó! Me di cuenta de que había cometido un error tipográfico, gracias!
    • ¿Has comprobado el violín que Alex publicado
    • Eres bienvenido. También no olvides marcar esto como la respuesta para los demás. Saludos.
  2. 1

    Puede utilizar el !important modificador.

    Su violín aquí

    Sólo se cansarán que va a modificar todos sus .panels.

    Sugiero que definir una clase personalizada, y usarlo donde desea que esta modificación tenga lugar.

Dejar respuesta

Please enter your comment!
Please enter your name here