Фиксированная ширина боковой панели на начальной загрузке 4, где основная область исчезает на мобильном телефоне

Question

Существует множество примеров того, как иметь боковую панель фиксированной ширины в Bootstrap 4, но я не нашел такой, которая бы приводила к исчезновению основного контента на мобильном телефоне.

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

<div class="row no-gutters flex-nowrap">
  <div class="col-md col-12 d-none d-xs-block d-sm-block ">
    Main area
  </div>
  <div class="col-md-4 col-12 sidebar">
    Sidebar
  </div>
</div>


.sidebar {
    max-width: 600px; min-width: 600px
}

И это в основном работает, но в результате между 768 и 576 пикселями боковая панель полностью исчезает.

Что мне нужно, так это чтобы боковая панель была фиксированной ширины с основной областью, уменьшающейся и в конечном итоге исчезающей.

Answer 1

С помощью нескольких строк CSS вы можете достичь этого с помощью Flexbox. Пожалуйста, посмотрите фрагмент, который я добавил с этим ответом.

Чтобы узнать больше о Flexbox, вы можете просмотреть эти ссылки.

https://css -tricks.com / сниппеты / CSS / а-руководство к Flexbox /

https://yoksel.github.io/flex-cheatsheet/

.wrapper {
  display: flex;
  height: 100vh;
}

.sidebar {
  min-width: 150px;
  max-width: 150px;
  height: 100%;
  background: grey;
  padding: 20px;
}

.content {
  padding: 20px;
  height: 100%;
  background: lightgrey;
}

<div class="wrapper">
  <div class="sidebar">
    sidebar
  </div>
  
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores
  </div>
</div>

Answer 2

Я полагаю, вы ищете это:

@media (min-width:768px) {
  .sidebar {
    max-width: 600px; min-width: 600px;
  }  
}
.sidebar {
  background-color: #f5f5f5;
}  

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row no-gutters flex-nowrap">
  <div class="col d-none d-md-block">
    Main area
  </div>
  <div class="col sidebar">
    Sidebar
  </div>
</div>

Я обернул правило фиксированного размера в условие запроса @media, применяемое только к md и выше, и соответственно изменил классы, примененные к столбцам.

Так как вы в любом случае настраиваете пользовательскую ширину боковой панели, вам не нужны классы col-* для ваших столбцов.