Cabecera del panel Bootstrap 3 con botones en posición incorrecta

117

Estoy usando Bootstrap 3 y me gustaría agregar algunos botones en el encabezado del panel, en la esquina superior derecha. Al intentar agregarlos, se muestran debajo de la línea de base del título.

Código: http://bootply.com/82631

¿Cuáles son los CSS que faltan que debo agregar al título, el encabezado del panel o los botones?

css twitter-bootstrap twitter-bootstrap-3 Dedé
fuente

Respuestas:

175

Comenzaría agregando clearfixclase a la clase <div>with panel-heading. Luego, agregue ambos panel-titley pull-lefta la H4etiqueta. Luego añadepadding-top , según sea necesario.

Aquí está el código completo:

<div class="panel panel-default">
    <div class="panel-heading clearfix">
      <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4>
      <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
      </div>
    </div>
    ...
</div>

http://bootply.com/98827

OregónJeff
fuente
Esto funciona, el único problema es que el encabezado del panel se coloca en la parte superior del div y el grupo btn se alinea verticalmente
Nuno Furtado
9
O simplemente retire el .panel-titledel <h4>y no necesitará el relleno.
caw
153

Llego un poco tarde al juego aquí, pero la respuesta simple es mover el H4 DESPUÉS del botón div. Este es un problema común al flotar, siempre tenga sus flotadores definidos ANTES del resto del contenido o tendrá ese problema adicional de salto de línea.

<div class="panel-heading">
    <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
    <h4>Panel header</h4>
</div>

El problema aquí es que cuando sus flotadores se definen después de otros elementos, la parte superior del flotador comenzará en la última posición de línea del elemento inmediatamente antes. Entonces, si el artículo anterior se ajusta a la línea 3, su flotador también comenzará en la línea 3.

Mover el flotador al TOP de la lista elimina el problema porque no hay elementos previos para empujarlo hacia abajo y cualquier cosa después del flotador se representará en la línea superior (asumiendo que hay espacio en la línea para todos los elementos).

Ejemplo de orden correcto e incorrecto y los efectos: http://www.bootply.com/HkDlNIKv9g

getaf
fuente
Si no le gusta el tamaño h4, use <h4> <small>
Encabezado del
No puedo entender por qué mi botón no encaja dentro del encabezado del panel. El botón es presionado por el relleno del encabezado del panel y no aumenta la altura del encabezado del panel. ¿Qué estoy haciendo mal? (Editar: aparentemente eso se debió a agregar una clase a un h4 ... pero aún ahora el título es demasiado alto).
Nate
1
Tuve que agregar clearfix al encabezado del panel y agregar el relleno como en la respuesta anterior. ¿Puedes hacer una muestra / demostración funcional?
Nate
2
Nate, aquí hay una muestra de pedidos correctos vs incorrectos. bootply.com/HkDlNIKv9g
getsaf
1
Creo que debería cambiarse la clase btn-sm por btn-xs. Encaja mejor
IlGala
40

Debe aplicar un "clearfix" para borrar el elemento principal. Lo siguiente, el h4 para el título del encabezado, se extiende por todo el encabezado, por lo que después de aplicar clearfix, empujará hacia abajo el elemento secundario, lo que hará que el div del encabezado tenga una altura mayor.

Aquí hay una solución, simplemente reemplácela con su código.

  <div class="panel-heading clearfix">
     <b>Panel header</b>
       <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
      </div>
   </div>

Editado el 22/12/2015 - agregado .clearfix al encabezado div

andre3wap
fuente
3
debería funcionar si agrega la clase clearfix al encabezado del panel en lugar de agregar otro div vacío
escapedcat
10

Coloqué el grupo de botones dentro del título y luego agregué un clearfix en la parte inferior.

<div class="panel-heading">
  <h4 class="panel-title">
    Panel header
    <div class="btn-group pull-right">
      <a href="#" class="btn btn-default btn-sm">## Lock</a>
      <a href="#" class="btn btn-default btn-sm">## Delete</a>
      <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
  </h4>
  <div class="clearfix"></div>
</div>
Jonathan
fuente
1
más elegante: <div class = "panel-header clearfix">;)
Marwen Trabelsi
8

Intenta poner el btn-groupinterior H4así ...

<div class="panel-heading">
    <h4>Panel header
    <span class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </span>
    </h4>
</div>

http://bootply.com/lpXoMPup2d

Zim
fuente
No, no es una "buena práctica", pero respondió a la pregunta original. Actualizo la respuesta de acuerdo con las mejores prácticas.
Zim
6

Tienes parte de la razón. con <b>title</b>se ve bien, pero me gustaría usar<h4> .

he puesto <h4 style="display: inline;"> y parece que funciona.

Ahora, solo necesito agregar algo de alineación vertical.

Dedé
fuente
1
inline-blockes mejor.
Dedé
6

En este caso debe agregar .clearfixal final del contenedor con elementos flotantes.

<div class="panel-heading">
    <h4>Panel header</h4>
    <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
    <span class="clearfix"></span>
</div>

http://www.bootply.com/NCXkOtIkD6

sargonpiraev
fuente
1

Descubrí que usar una clase adicional en el encabezado .panel ayuda.

<div class="panel-heading contains-buttons">
   <h3 class="panel-title">Panel Title</h3>
   <a class="btn btn-sm btn-success pull-right" href="something.html"><i class="fa fa-plus"></i> Create</a>
</div>

Y luego usando este código menos:

.panel-heading.contains-buttons {
    .clearfix;
    .panel-title {
        .pull-left;
        padding-top:5px;
    }
    .btn {
        .pull-right;
    }
}
Jon Joyce
fuente
0

El h4elemento se muestra como un bloque. Agregue un borde y verá lo que está sucediendo. Si desea hacer flotar algo a la derecha, tiene varias opciones:

  1. Coloque los elementos flotantes antes del elemento bloque (h4).
  2. Flota también el elemento h4.
  3. Muestra el elemento h4 en línea.

En cualquier caso, debe agregar la clearfixclase al elemento contenedor para obtener el relleno correcto para sus botones.

Es posible que también desee agregar la panel-titleclase o ajustar el relleno en el elemento h4.

mrdeus
fuente
0

¿o esto? Usando la clase de fila

  <div class="row"> 
  <div class="  col-lg-2  col-md-2 col-sm-2 col-xs-2">
     <h4>Panel header</h4>
  </div>
 <div class="  col-lg-10  col-md-10 col-sm-10 col-xs-10 ">
    <div class="btn-group  pull-right">
       <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
     </div>
  </div>
</div>
Kanit P.
fuente