Bootstrap 3, как сохранить col-md- # от укладки?

Question

Я знаю, что я могу использовать col-xs- #, чтобы предотвратить размещение столбцов, но я унаследовал сайт, когда все использует col-md- #. Сайт выглядит хорошо, когда браузер работает в полноэкранном режиме, но когда вы изменяете его размер примерно до 50% экрана, столбцы складываются, даже если на экране все еще остается много места. Как я могу переопределить классы col-md- #, чтобы они не складывались, поэтому мне не нужно находить и заменять их на col-xs- #?

Полный экран

Ширина браузера 1100px

Answer 1

Чтобы ответить на ваш вопрос, добавьте следующий CSS.

В первой строке медиазапроса измените 600px на точку останова, на которой вы хотите остановить укладку столбцов.

@media (min-width: 600px){

.col-md-2 {
    width: 16.66666667%;
    float:left;
}

.col-md-3 {
    width: 25%;
    float:left;
}

.col-md-4 {    
    width: 33.33333333%;
    float:left;
}

.col-md-6 {
    width: 50% !important;
    float:left;
}
}

Удачи

Answer 2

Вы можете настроить Bootstrap так, как вы хотите, прежде чем загружать его.

Для версии 3 посмотрите на эту страницу https://getbootstrap.com/docs/3.4/customize/#media-queries-breakpoints

Значение по умолчанию @screen-md param равно 992px . Выше этой ширины области просмотра столбцы (.col-md-*) будут отображаться рядом. Хотя я думаю, что это не лучшая практика, все, что вам нужно сделать, это понизить это значение до значения выше 768px (предыдущая точка останова).

Важно! Донне уменьшайте это значение до меньше 768px , иначе вы столкнетесь с серьезными проблемами с сеткой.

Я настоятельно рекомендую вам найти и заменить все col-md- по крайней мере col-sm для вашего проекта.