Установите класс контейнера Bootstrap на 940 пикселей максимум

Question

Я использую Bootstrap 4 с контейнером с шириной по умолчанию на экране моего рабочего стола.

Я хочу, чтобы основной раздел содержимого моего приложения был контейнером максимум 940 пикселей на большом экране.

Должен ли я просто переопределить класс контейнера начальной загрузки или создать новый класс container-2?или что-то еще?

Редактировать

Answer 1

Так как контейнер Bootstrap отзывчив и использует медиа-запросы для установки максимальной ширины.

Один контейнер используется только для определения ширины, автоматических полей и отступов. Другой класс сетки(т. е. row, col) не зависит от него, поэтому было бы проще определить свой собственный контейнер.

Чтобы определить свой собственный container-940 ...

.container-940 {
  width: 100%;
  max-width: 940px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

Демонстрация: https://www.codeply.com/go/QOAjmGLp7K

Или, , если вы хотите использовать существующий .container, переопределения будут ...

@media (min-width: 992px) {
  .container {
    max-width: 940px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 940px;
  }
}

Демонстрация: https://www.codeply.com/go/QOAjmGLp7K

---

Если вы хотите изменить , то максимальная ширина будет меньше при меньшей ширине, чем вы бы настроили медиазапросы по желанию:

@media (min-width: 576px) {
  .container {
    max-width: ??px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: ??px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 940px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 940px;
  }
}

---

Answer 2

в соответствии с bootstrap.css вы можете создать свой собственный класс контейнера.Это классы, которые вы должны «перестроить»:

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

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.container {
  min-width: 992px !important;
}

Вы никогда не должны переопределять оригинальные классы начальной загрузки.

---

Чтобы убедиться, что все работает хорошо, вы можете сделать что-то вроде этого:

@media (min-width: 992px) {
  .container.max-width-940 {
    max-width: 940px !important;
  }
}

@media (min-width: 1200px) {
  .container.max-width-940 {
    max-width: 940px !important;
  }
}

.container.max-width-940 {
  min-width: 940px !important;
}

и использовать его как: <div class="container max-width-940"></div>

Answer 3

изменить css в файле начальной загрузки

нажмите на ссылку выше и замените указанное значение 2 на 940px в файле bootstrap.min.css.

Answer 4

Вы должны изменить переменные в bootstrap/scss/_variables.scss

Взгляните на строку 210 из _variables.scss source числа для ширины .container, в пикселях, при разных разрешениях.