Bootstrap 3 выровняйте элементы - PullRequest
Новая
       9

Bootstrap 3 выровняйте элементы

0 голосов
/ 02 января 2019

У меня есть два столбца Bootstrap 3 с некоторым многострочным текстом в левом столбце и кнопкой в ​​правом столбце, и я хочу, чтобы нижняя часть кнопки отображалась на одной линии с нижней частью текста. 

<div class = "container">
            <div class = "row">
                <div class = "col-sm-6">
                Paul Grenyer</br>
                XX XXXXX Road</br>
                Norwich</br>
                XXX XXX</br>
                </br>
                XXXXX XXX XXX

                </div>
                <div  class = "col-sm-6 align-items-end">
                    <button>Metal</button>
                </div>
            </div>
        </div>

В начальной загрузке 4 кажется, что это можно сделать с помощью align-items-end, есть ли эквивалент начальной загрузки 3?

1 Ответ

0 голосов
/ 02 января 2019

Не похоже, что в Bootstrap 3 встроено решение для достижения этой цели, но это должно быть достаточно легко исправить: 

.align-bottom {
    font-size: 0;
}
.align-bottom > * {
    float: none;
    display: inline-block;
    font-size: 14px; /* if using LESS it's quicker to just use @font-size-base */
}
.align-bottom > *:last-child {
    vertical-align: bottom;
}
.align-bottom p:last-child {
    margin-bottom: 0; /* optional */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row align-bottom">
        <div class="col-sm-6">
          Paul Grenyer<br/>
          XX XXXXX Road<br/>
          Norwich<br/>
          XXX XXX<br/><br/>
          XXXXX XXX XXX
        </div>
        <div  class="col-sm-6 align-items-end">
            <button>Metal</button>
        </div>
    </div>
</div>

Это решение было рассмотрено в нескольких вариантах:

Как выровнять элементы сетки в макете начальной загрузки

...