загрузочный контейнер полной ширины, когда маленький

Question

У меня есть загрузочный контейнер, который отлично смотрится на средних и больших размерах.Когда я маленький, я хочу, чтобы контейнер был на всю ширину.Я наложил на него выражения mx-2 mx-md-auto, поэтому он хорошо выравнивается по левому краю на небольших экранах, но не на всю ширину, поскольку контейнер обычно имеет фиксированную ширину (510 пикселей).Я не хочу изменять точки останова контейнера начальной загрузки, так как я бы предпочел использовать адаптивные классы для этого конкретного использования контейнера.Что я могу сделать здесь?

Answer 1

Используйте пользовательский CSS для переопределения max-width контейнера при достижении желаемой ширины.

Это max-width, который запрещает container брать всю ширину устройства.Поскольку bootstrap не имеет служебных классов для max-width, вам необходимо переопределить его самостоятельно.

@media (max-width: 767.98px) {
  .mx-w-100 {
    max-width: 100% !important;
  }
}

---

Answer 2

На маленьком экране (xs) Bootstrap устанавливает width: auto на .container, поэтому по умолчанию он должен быть полноэкранным.

Также Bootstrap - это платформа для мобильных устройств, поэтому вы всегда должны начинать с самого маленького экрана, а затем переопределять его на больших экранах.Поэтому обычно вы начинаете с .col-X, а затем переписываете его при необходимости .col-[screen]-Y.

Например, взгляните на следующий фрагмент и попытайтесь изменить его размер:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-3 col-lg-2">
      Test 1
    </div>
    <div class="col-12 col-sm-6 col-md-3 col-lg-2">
      Test 2
    </div>
  </div>  
</div>