Бутстрэп контейнер для жидкости шириной 4 мин (изменить поведение)

Question

Я создаю fluid-container Bootstrap 4 SPA, который будет использоваться только на рабочем столе.

Я пытаюсь ограничить минимальную ширину тела до 1200 пикселей и сделать горизонтальную прокрутку, если пользователь уменьшает ширину браузераменее 1200px, однако, любой размер больше 1200px должен быть отзывчивым.

Я пробовал следующее:

<meta name="viewport" content="width=device-width, initial-scale=1">

и

body { min-width: 1200px; }

Но это не такКажется, это не сработало, я также пытался установить его на контейнере с жидкостью, но это не сработало, и все элементы по-прежнему реагировали ниже 1200 пикселей.

Столбцы внутри контейнера замерзают, но при любых настройкахна которое влияет реагирующее поведение, все еще меняется, когда размер становится меньше 1200px, это нужно прекратить.

Как добиться минимальной ширины в Bootstrap 4 fluid-container и сделать так, чтобы все элементы, работающие без ответа, были ниже

Answer 1

"Столбцы внутри контейнера замерзают, но любой параметр, на который влияет адаптивное поведение, все еще меняется, когда размер становится меньше 1200px, это необходимо остановить."

Насколько далекокак я могу сказать, ваш вопрос на самом деле , как сделать адаптивное поведение на основе контейнера ширины, а не области просмотра width .Как уже говорилось ранее, это не совсем возможно , потому что реагирующее поведение Bootstrap использует запросы @media.

Ваш оригинал вопрос об установке минимальной ширины контейнера уже получен,Проще всего использовать пользовательский элемент контейнера, подобный следующему:

.container-1200 {
  width: 100%;
  min-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto;
}

https://www.codeply.com/go/CUAh9pgRpu

Однако это не повлияет на другие адаптивные поведения, такие как ширина столбца, адаптивное выравнивание, flexbox и т. Д.потому что вы не меняете отзывчивые точки останова Bootstrap.

AFAIK, единственный способ получить желаемый результат с чувствительностью выше 1200px - это настроить точки останова Bootstrap с помощью SASS.Вы переопределите все точки останова в xl до 1px min-width.Это заставит все меньшие точки останова (xs, sm, md и lg) вести себя одинаково (без ответа), и xl все равно будет реагировать.

$grid-breakpoints: (
  xs: 0,
  sm: 1px,
  md: 1px,
  lg: 1px,
  xl: 1200px
);

Затем установите ширину контейнера..

$container-max-widths: (
  xs: 1200px,
  sm: 1200px,
  md: 1200px,
  lg: 1200px,
  xl: 100%
);

В итоге у вас есть единичная точка останова 1200px:

Демо: https://www.codeply.com/go/gnwTNZFYV2

---

Связанный:

Как настроить Bootstrap 4 с использованием SASS для различных столбцов сетки и точек останова?
Как создать новые точки останова в начальной загрузке 4 с использованием CDN?

Answer 2

Попробуйте добавить медиа-запрос следующим образом:

@media (max-width:1201px) {
    body{
        min-width:1200px;
        overflow-x:scroll;
    }
}

Используйте 1201px для медиа-запроса, чтобы избежать переопределений.

Answer 3

Так что вот в чем дело: всякий раз, когда мы проектируем отзывчивость, мы в основном используем адаптивный, чтобы соответствовать устройству, и мы скрываем переполнение.Но особенно его overflow-x:hidden.Таким образом, вы можете просто оставить тег overflow-x:auto на теле с помощью min-width, чтобы исправить это.

body {
  min-width: 1200px;
  overflow-x: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        Hello Bootstrap 4
      </div>
    </div>
  </div>

Answer 4

Попробуйте это:

.custom {
  min-width: 1200px;
  overflow: scroll;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid custom">
  <div class="row">
    <div class="col-6">
      Hello
    </div>
    <div class="col-6">
      Hello
    </div>
  </div>
</div>