0

Estoy haciendo un menú cuadriculado con Bootstrap siguiendo esta estructura:

<div class="col-md-4 col-sm-4 col-xs-4">
    <a href="Account/frm_ghorarios" class="well-grid">
        <div class="well text-center">
            <h1 class="well-h1">Grupos horarios</h1>
            <i class="fa fa-clock-o fa-big" aria-hidden="true"></i><i style="margin-left: -4px;" class="fa fa-clock-o fa-big" aria-hidden="true"></i>
            <br>
            <br>
        </div>
    </a>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
    <a href="Account/frm_editar_marcajes" class="well-grid">
        <div class="well text-center">
            <h1 class="well-h1">Editar turnos</h1>
            <i class="fa fa-pencil fa-big" aria-hidden="true"></i>
            <br>
            <br>
        </div>
    </a>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
    <a href="Account/frm_editar_marcajes_a" class="well-grid">
        <div class="well text-center">
            <h1 class="well-h1">Editar actividades</h1>
            <i class="fa fa-pencil fa-big" aria-hidden="true"></i>
            <br>
            <br>
        </div>
    </a>
</div>

El problema lo tengo cuando, al encoger mucho la pantalla, el h1 no cabe en una línea y se separa en dos, dejando los cuadros con distinto tamaño. He creado media queries para encoger el tamaño de la letra junto con el "white-space: nowrap;", pero para pantallas pequeñas acaba por no leerse

Alguna idea?

Gracias de antemano

2

1 respuesta 1

1

Utilizando una combinación de display: table, display: table-cell y vertical-align:middle se consigue que el texto se center verticalmente y no se desajuste tu menú.

Por cierto, he eliminado unos elementos <br> que tenías para darle más altura los elementos del menú.

.col-md-4 a, .col-sm-4 a, .col-xs-4 a {
  display: table;
  min-height: 148px;
  width: 100%;
}

.well {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
    padding-top: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-md-4 col-sm-4 col-xs-4">
    <a href="Account/frm_ghorarios" class="well-grid">
        <div class="well text-center">
            <h1 class="well-h1">Grupos horarios</h1>
            <i class="fa fa-clock-o fa-big" aria-hidden="true"></i>
        </div>
    </a>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
    <a href="Account/frm_editar_marcajes" class="well-grid">
        <div class="well text-center">
            <h1 class="well-h1">Editar turnos</h1>
            <i class="fa fa-pencil fa-big" aria-hidden="true"></i>
        </div>
    </a>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
    <a href="Account/frm_editar_marcajes_a" class="well-grid">
        <div class="well text-center">
            <h1 class="well-h1">Editar actividades</h1>
            <i class="fa fa-pencil fa-big" aria-hidden="true"></i>
        </div>
    </a>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

3
  • Entiendo lo que intentas hacer, pero el problema está cuando el responsive hace que una "frase" más corta (Editar turnos < Editar actividades) cabe en una única línea, pero la más larga no. Prueba ejecutando desde aquí mismo y mostrandolo en pantalla completa y mueve el ancho de la ventana verás lo que quiero decir. Gracias por responder tan rápido. Un saludo
    – Andrés73
    Commented el 3 ene. 2017 a las 12:35
  • @Andrés73 Exacto.. de eso se trata, prueba tú mismo a redimensionar y verás que no quedan líneas más largas que otras Commented el 3 ene. 2017 a las 13:41
  • @Andrés73 tal vez lo que intentas es que se redimensione el texto y no salte de línea? O que el texto se mantenga en una línea pero cortado y con puntos supensivos ...? Hay muchas soluciones aceptables, todo depende de la solución que le quieras dar. Commented el 3 ene. 2017 a las 13:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.