Как избавится от переноса блока на новую строку (скрин прилагается)?

Question

[Артур]

Пациент: тык

Собственно, сама проблема видна на фото:


Код блока:

<div class="col-xs-6 col-sm-12 col-md-3 my">
...
</div>

Comments

[Rustam Bainazarov]

Flexbox.

[Rustam Bainazarov]

Если быстрый фикс, то вот так:

#dle-content {
    display: flex;
    flex-flow: row wrap;
}

#dle-content nav { /* т. к. у вас пагинация внутри сетки */
    flex: 0 0;
    flex-basis: 100%;
    width: 100%;
}

[Rustam Bainazarov]

А так, если и Bootstrap, то используйте 4-ю версию. А лучше вообще не Bootstrap, конечно.

[Артур]

Рустам Байназаров, почему не bootstrap?

[Сергей delphinpro]

<div class="col-xs-6 col-sm-12 col-md-3 my">
...
</div>

@media (max-width: 767px) {
  .my:nth-child(2n+1) { clear: left; }
}
@media (min-width: 992px) {
  .my:nth-child(4n+1) { clear: left; }
}

[Артур]

Сергей delphinpro, криво работает. Первый блок остается один, а остальные с новой строки норм отображаются

[Сергей delphinpro]

Артур, я вам показал принцип устранения бага. Дальше сами тюнингуйте.

[Сергей delphinpro]

Один хрен карточки будут разной высоты. Лучше на флексы перейти.

[Rustam Bainazarov]

Артур, потому что… я его не люблю :))

Answer 1

[Арсений Матыцин]

Перейти на последний бутстрап

А, ну и вся эта мотня должна быть в строке <div class="row">....

Comments

[Артур]

Если обновляться с 3.3.7, нужно код тоже подгонять под новую версию или просто заменить файлы фреймворка?

[Арсений Матыцин]

Артур, читать официальную документацию. Менять и файлы и классы. Немного при... прибалдеть от изменений, расстроиться и перейти на что-то либо свое, либо от бута оставить только сетку.

Я давно имел карманный страховщик бута для таких, простецких проектов, но сейчас психанул и от бута отказался. Вывожу из всех проектов его. Заменил на разросшийся карманный FA-Kit. Разве что JS еще местами болтается.

Answer 2

[Павел]

Быстрый фикс это скорее:

.panel-footer {
    padding: 10px;
    border-top: 1px solid #DBE0E4;
    background: #F5F5F5;
    box-shadow: none;
    height: 55px;
    overflow: hidden;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

Comments

[Артур]

Такой вариант не подходит т.к. блок может содержать более 3 строк текста.

[Павел]

Артур, можно увеличить height или при наведении на блок показывать блок поверх всего остального и полное название, т.е.

.panel-default {
    border-color: #DBE0E4;
    position: relative;
    box-sizing: border-box;
}


.panel-footer {
    padding: 10px;
    border-top: 1px solid #DBE0E4;
    background: #F5F5F5;
    box-shadow: none;
    height: 33px;
    overflow: hidden;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.panel-default:hover .panel-footer {
    position: absolute;
    height: auto;
    width: 100%;
    z-index: 9999;
    text-align: center;
}

[Артур]

Павел, Как вариант, но посетители вряд ли будут наводить мышь на название каждого фильма, чтобы прочитать полное название.