Как я могу показать столбец Bootstrap 5 только на мобильном телефоне?
У меня есть сортируемая таблица во втором столбце, и перетаскивание с ней не работает, поэтому я хотел бы создать некоторое пространство перед столбцом для перетаскивания. Как сделать так, чтобы первый столбец отображался только на мобильных устройствах?
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous">
<div class = "row">
<div class = "col-sm-1 d-lg-none">
Show only on mobile devices
</div>
<div class = "col-sm-11 d-block">
Show on all devices
</div>
</div>
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
1
21
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Я думаю, это то, что вы ищете (col-sm-1 d-block d-sm-none):
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous">
<div class = "row">
<div class = "col-sm-1 d-block d-sm-none">
Show only on mobile devices
</div>
<div class = "col-sm-11 d-block">
Show on all devices
</div>
</div>
Другие вопросы по теме
Jquery datatable версии 1.10 влияет на раскрывающийся компонент Bootstrap версии 5.1
Центрирование элементов в строке (по вертикали) с помощью react-bootstrap
Как правильно наложить кнопку на текстовое поле?
Всплывающая подсказка Bootstrap HTML с потрясающими значками шрифта на теге привязки <i> не работает в фокусе
Как настроить таргетинг на все элементы с определенным классом в JavaScript
Как сделать так, чтобы раскрывающийся список Bootstrap отображался перед липкими заголовками таблиц?
Bootstrap 5 Индикатор слайдов карусели не работает
Как добавить popper.js в проект Laravel 8 с Bootstrap 5?
Как заставить тумблер использовать boostrap 5?
Отключить начальную загрузку 5 Отзывчивые размеры шрифта?
Похожие вопросы
P-dropdown css ведет себя по-другому
Bootstrap: как отобразить текст в индикаторах карусели?
Загрузка изображения в Angular
Абсолютное позиционирование Bootstrap, создающее перекрывающийся макет
Горизонтальная прокрутка карточек с «липкой» карточкой
CSS/Bootstrap Поместите набор кнопок сверху (и внутри) другого div
Как я могу заставить детей flex-column равномерно заполнять всю доступную высоту?
Как изменить цвет первого элемента в опции выбора?
Bootstrap 5 nav-scroller – как сохранить экран под панелью навигации при прокрутке страницы вниз
Как поставить две карты рядом?
Очевидно, вы уже знакомы с Утилиты отображения Bootstrap. Что за вопрос?