Nano Hash - криптовалюты, майнинг, программирование

Bootstrap 4: переключение между столбцами на мобильном телефоне

Я создал стандартный макет с боковой панелью, используя систему сетки Bootstrap (EDIT: я использую Bootstrap 4, но все еще могу переключиться). Это выглядит так:

<div class="row">
  <div class="col-md-3">
    ...
  </div>
  <div class="col-md-9">
    <div class="row">
      <div class="col-md-4">...</div>
      <div class="col-md-4">...</div>
      <div class="col-md-4">...</div>
    </div>
  </div>
</div>

введите здесь описание изображения

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

введите здесь описание изображения

Также обратите внимание на другой порядок элементов в зеленой области.

Есть ли умный способ сделать это? Или мне нужно изменить дом с помощью JavaScript? Заранее спасибо :)

javascript css twitter-bootstrap bootstrap-4 twitter-bootstrap-4
29.03.2017

  • вы можете добавить боковую панель с помощью переключателя / offcanvas в случае мобильного устройства. getbootstrap.com/examples/offcanvas 29.03.2017
  • Вы все еще хотите, чтобы оба были видны, когда они переключаются? Или одно скрыто, а другое показано? 29.03.2017
  • @ZimSystem только один должен отображаться в полноэкранном режиме. 29.03.2017

Ответы:


1

Вы можете использовать jQuery для переключения одного из служебных классов BS4 flexbox. Например, примените flex-last к первому (col-md-3) столбцу.

Чтобы переключить порядок на мобильном устройстве с помощью кнопки, переключите класс flex-last...

$('#btnToggle').click(function(){
    $('.col-md-3').toggleClass('flex-last');
})

РЕДАКТИРОВАТЬ: Чтобы отображать только по одному (переключите видимость двух разделов с помощью кнопки), вместо этого переключите класс hidden-sm-down...

$('#btnToggle').click(function(){
    $('.col-md-3, .col-md-9').toggleClass('hidden-sm-down');
})

Демо

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

<div class="row">
  <div class="col-md-3 flex-last flex-md-unordered">
    ...
  </div>
  <div class="col-md-9">
    <div class="row">
      <div class="col-md-4">...</div>
      <div class="col-md-4">...</div>
      <div class="col-md-4">...</div>
    </div>
  </div>
</div>

Обновить

Начиная с Bootstrap 4 Beta 3, классы упорядочения называются order-* , например order-1, order-md-2 и т. д.

29.03.2017
  • хорошо, этот подход действительно прост... он не полностью отзывчив, только кнопка скрыта. поэтому мне все еще нужно использовать js, чтобы заставить его работать, github.com/maciej-gurban/ responsive-bootstrap-toolkit выглядит многообещающе 29.03.2017
  • Я не понимаю, что вы имеете в виду, он не полностью отзывчивый, только кнопка скрыта. И да, вам нужно использовать JS для переключения div. 29.03.2017
  • Под отзывчивостью я подразумеваю, что она ведет себя правильно при изменении размера окна. в вашей демонстрации я могу сделать окно маленьким, скрыть один из столбцов, снова сделать окно большим, а столбец все еще скрыт. это нарушает макет... я полагаю, это работает только при прослушивании событий изменения размера окна. 29.03.2017
  • Попробуйте мое последнее обновление. Они оба видны на большей ширине. 29.03.2017
  • Зачем использовать javascript для того, для чего он не нужен? 29.03.2017
  • Потому что ОП хочет переключать видимость на мобильном устройстве с помощью кнопки, а не порядка. 29.03.2017

    • 2

    Bootstrap 4 использует Flexbox, что означает, что вы можете использовать порядок, в котором отображаются элементы.

    Как обычно, вы можете указать, как он будет отображаться в разных окнах просмотра, используя такие классы, как order-last и order-sm-unordered.

    Документация flexbox/order

    29.03.2017
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..