Проблемы переразмера well-grid

Я делаю разлинованное в клетку меню с Bootstrap продолжая эту структуру:

<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>

Проблема это у меня есть, когда, сморщив много экран, h1 он не помещается в линии и отделяется в двух, оставляя поля ввода с различным размером. Я создал средний показатель queries, чтобы сморщивать размер буквы вместе с "white-space: nowrap;", но для маленьких экранов он заканчивает тем, что не читается

Какая-то идея?

Спасибо заранее

0
задан 03.01.2017, 12:53
0 ответов

Используя комбинацию display: table, display: table-cell и vertical-align:middle добиваются, чтобы текст center вертикально и не нарушило договор твое меню.

Конечно, я удалил элементы <br> что у тебя был, чтобы элементы меню ему дали больше высоту.

.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>
1
ответ дан 03.12.2019, 17:53
  • 1
    Я понимаю то, что ты пробуешь сделать, но проблему está когда responsive делает, что одна " frase" má s отрежь (Издавать смены < Издавать активность) помещается в ú nica lí nea, но má s скажи не. Доказательство выполняя с aquí сам и показывая это на полном экране и двинь ширину окна verá s то, что я хочу сказать. Спасибо за ответ так rá я прошу. Приветствие –  03.01.2017, 14:35
  • 2
    @André s73 Точный. об этом он относится друг к другу, пытается tú сам в redimensionar и verá s, что не остаются lí neas má s ты отпускаешь, что другие –  03.01.2017, 15:41
  • 3
    @André s73 возможно то, что ты пробуешь, что redimensione текст и не отпускайте lí nea? Или что текст упорствовал в lí nea, но чашка кофе с молоком и с точками supensivos ...? Есть много решений приемлемые , все зависит от solució n, который ты захотел дать ему. –  03.01.2017, 15:43

Теги

Похожие вопросы