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

Есть много примеров того, как иметь боковую панель фиксированной ширины в 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 пикселями боковая панель полностью исчезает.

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

css twitter-bootstrap bootstrap-4

29.06.2018 04:03

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

313

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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-* для столбцов.

29.06.2018 05:23

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

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

https://css-tricks.com/snippets/css/a-guide-to-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>

29.06.2018 08:56

Другие вопросы по теме

Как добавить несколько строк для ввода?

Дублировать элементы одного класса и помещать их под собой?

Отключить активную кнопку вкладки с помощью JavaScript

Таблица с разбивкой на страницы AngularJS: параметры limitTo не обновляются в представлении

Изменить цвет после условия в vue.js

Класс панели начальной загрузки захватывает содержимое вышеупомянутого div

Выпадающее меню навигации целевого заголовка закрывается div с помощью jQuery

Неправильный вывод из вертикальной начальной загрузки вкладки с vue.js

Анимация заливки цвета фона индикатора загрузочной карусели

Сворачиваемая боковая панель работает на Bootstrap 3.0.3, но не на 3.3.7

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

Ответы 2

Другие вопросы по теме

Похожие вопросы