Как вертикально выровнять кнопки бутстрапа с текстом подряд?

У меня возникла проблема с строками загрузки. Мои кнопки не выравниваются по вертикали с текстом строки. Вот пример проблемы:

<div class="col-md-2 text-right">
    <button class="btn btn-lg btn-primary" type="button">A</button>
</div>
<div class="col-md-1 text-center">
    <h3>or</h3>
</div>
<div class="col-md-2 text-left">
    <button class="btn btn-lg btn-primary" type="button">B</button>
</div>

Текст даже зависает под кнопками, если я делаю его больше, например:

<div class="col-md-1 text-center">
    <h1>OR</h1> <!-- H1 now! -->
</div>

Есть ли способ получить нижнюю часть "или", чтобы составить нижнюю часть текста кнопки? Или даже просто иметь текст с помощью кнопок? Спасибо!

Обновить: здесь JSFiddle, по запросу: http://jsfiddle.net/Dk37C/1/ (вам нужно будет растянуть правое чтобы увидеть поведение)

Ответ 1

<h3> имеет на нем набор полей, поэтому, если он станет больше, верхняя граница поля останется прежней, но размер шрифта будет увеличиваться "вниз".

Вы можете установить стили <h3> в соответствии со стилями кнопки, то есть отступом, высотой строки, размером шрифта и т.д.

.text-center h3 {
  padding: 11px 16px; /* Extra pixel top and bottom for border on buttons */
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
  margin: 0;
}

http://jsbin.com/UNAYOqU/1/edit

Ответ 2

Я нашел простой способ использовать классы начальной загрузки для текста и кнопку в MVC View, но я уверен, что идея будет применяться там, где вы можете использовать Bootstrap.

Просто поместите тот же класс заголовка, например h3, в атрибуты класса как текста, так и кнопки.

например:

<div class="col-md-6 h3">
    Mileage Reimbursed Travel
</div>

<div class="col-md-2 h3">
    @Html.ActionLink("Create/Add ","Create", "EmployeeMileage")
</div>

Ответ 3

Я думаю, вы можете попробовать использовать свойство vertical-align css. Здесь хорошо написано, как использовать вертикальное выравнивание.

Ответ 4

Если вы спешите (я не говорю, что это лучшее решение, но эй, он работает), поместите текст, который вы хотите выровнять с кнопкой на другой кнопке, затем используйте CSS для удаления таких вещей, как фон и границу и отключить кнопку. Я использую это решение каждый раз в то время, и он отлично работает.