Как сделать эскизы Bootstrap одинаковой высоты, чтобы выравнивать панели эскизов?

Я использую миниатюры Bootstrap с SVG, которые я получил из Википедии, но по какой-то причине SVG имеют разные размеры, поэтому панели миниатюр не выравниваются.Как сделать эскизы Bootstrap одинаковой высоты, чтобы выравнивать панели эскизов?

С помощью какого метода можно сделать эскизы одинаковой высоты, чтобы выравнивать панели эскизов?

Код:

<div class="row"> 
    <div class="col-md-3"> 
    <div class="thumbnail"> 
     <img src="Flag_of_England.svg" style="width: 100%;" alt="England Chat"> 
     <div class="caption"> 
     <h3>England Chat</h3> 
     <p>...</p> 
     <p><a href="/chat" class="btn btn-primary" role="button">Chat</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-3"> 
    <div class="thumbnail"> 
     <img src="Flag_of_Ireland.svg" style="width: 100%;" alt="Ireland Chat"> 
     <div class="caption"> 
     <h3>Ireland Chat</h3> 
     <p>...</p> 
     <p><a href="/chat" class="btn btn-primary" role="button">Chat</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-3"> 
    <div class="thumbnail"> 
     <img src="Flag_of_Scotland.svg" style="width: 100%;" alt="Scotland Chat"> 
     <div class="caption"> 
     <h3>Scotland Chat</h3> 
     <p>...</p> 
     <p><a href="/chat" class="btn btn-primary" role="button">Chat</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-3"> 
    <div class="thumbnail"> 
     <img src="Flag_of_Wales.svg" style="width: 100%;" alt="Wales Chat"> 
     <div class="caption"> 
     <h3>Wales Chat</h3> 
     <p>...</p> 
     <p><a href="/chat" class="btn btn-primary" role="button">Chat</a></p> 
     </div> 
    </div> 
    </div> 
</div>

Скриншот:

источник

2016-12-02 user6888062

Я не думаю, что есть какие-то встроенные классы Bootstrap, которые бы выполнили то, что вы хотите. – zgood

Вы либо изменяете размеры своих изображений, чтобы все они имели одинаковые пропорции, либо вы установили это соотношение с CSS (что может нежелательно растянуть/скрипить изображение). Вы могли бы установить фоновое изображение, в котором элементы изображения будут иметь отношение ширины/высоты и использовать «background size: cover;», чтобы заполнить пробел (с некоторым отсечением). – hungerstar

Вы можете попробовать это: https://github.com/liabru/jquery-match-height, или, как говорит голодный, сделать изображения одинаковыми. – Vcasso

Это больше похоже вам нужно отрегулировать высоту изображения, чтобы выровнять их, но он должен быть фиксированным число, которое, вероятно, не является идеальным. Вы могли бы сделать 2 строки, один для изображений и один для текста, и до тех пор, пока каждая строка содержит 4 строки с классом = «col-md-3», содержимое будет выравниваться по вертикали, но не уверен, что вокруг есть другой способ.

источник

2016-12-02 16:19:33

Вы правы, контент ниже изображений будет иметь одну и ту же верхнюю строку, но разрыв между базой изображений и верхней частью контента будет нерегулярным. – hungerstar

Как сделать эскизы Bootstrap одинаковой высоты, чтобы выравнивать панели эскизов?

ответ

Смежные вопросы