Как скрыть колонку таблицы bootstrap

Используя Bootstrap 3, как я могу скрыть столбцы в моей таблице?

Я пытаюсь скрыть столбцы для моего адаптивного дизайна в col-xs и col-sm . Сначала я попытался использовать классы hidden-xs/hidden-sm , но это не сработало. Я также попытался использовать visible-desktop , как упомянуто здесь: Отзыв о загрузке Twitter — Показать столбец таблицы только на рабочем столе

Это тоже не сработало. Каков наилучший способ сделать это? Я скорее не делаю две отдельные таблицы, а затем прячу одну или другую.

Код, который я пробовал, который сейчас не работает:

3 ответа

Код должен работать просто отлично. Bootstrap поддерживает скрытие /отображение th и td с его адаптивными служебными классами https://github.com/twbs/самозагрузки /блоб /ведущий /менее /mixins.less # L504 :

Похоже, что hidden-xs/hidden-sm работало раньше, поскольку за принятый ответ набрано много голосов, однако пример с скрипкой не работает для меня, когда я Я изменяю размеры области. Для меня работает противоположная логика с использованием visible-md/visible-lg . Я не могу понять почему, потому что согласно документации Bootstrap должен поддерживать hidden-xs /hidden-sm .

Недавно я столкнулся с подобной проблемой, работая над отображением таблицы по-разному, в зависимости от размера экрана. Задачей для меня было скрыть один столбец на большом экране и показать его на мобильном устройстве, одновременно скрывая три других столбца (столбец «один» — это сумма данных в столбцах «три». Как и в ответе выше, я использовал медиазапрос, но полностью избавился от предварительно созданных представлений начальной загрузки. Я добавил классы в th и td задействованные теги.

Источник

Колонки

Узнайте, как благодаря нашей системе сеток flexbox изменять столбцы с помощью нескольких опций выравнивания, упорядочивания и смещения. Также смотрите как использовать классы столбцов для управления шириной элементов не связанных с сеткой.

Как это работает

Столбцы основаны на архитектуре flexbox. Это означает, что у нас есть опции для изменения отдельных столбцов и изменения групп столбцов на уровне строк. Вы выбираете как столбцы увеличить, уменьшить или изменить иным образом.

При построении макетов сетки весь контент помещается в столбцы. Иерархия сетки Bootstrap переходит от контейнера к строке столбца вашего контента. В редких случаях вы можете комбинировать контент и колонку, но делайте это внимателно.

Bootstrap включает в себя предопределенные классы для создания быстрых, адаптивных макетов. Имея шесть контрольных точек, дюжину столбцов на каждом уровне сетки и десятки классов, можно создать своих индивидуальные макеты. При желании, это можно настроить через Sass.

Выравнивание

Используйте утилиты выравнивания flexbox для выравнивания столбцов по вертикали и горизонтали.

Вертикальное выравнивание

Горизонтальное выравнивание

Обертка колонки

Если больше 12-ти колонок разместить в одном ряду, то каждая группа дополнительных колонок, как одно целое, переносится на новую строку.

Разрывы колонок

Чтобы сместить колонки на новую строку в гибком контейнере, нужно сделать следующее: добавьте элемент с шириной width: 100% туда, где вы хотите обернуть ваши колонки новой строкой. Обычно это достигается с помощью нескольких .row , но не каждый исполнительный метод поддерживает это.

Вы можете также применять это в брейкпойнтах с нашими отзывчивыми утилитами отображения элементов.

Упорядочивание

Класса порядка

Используйте классы .order- для управления визуальным порядком Вашего контента. Эти классы отзывчивы, поэтому Вы можете установить order по контрольной точке (например, .order-1.order-md-2 ). Включает поддержку от 1 до 5 на всех шести уровнях сетки.

Также существуют отзывчивые классы .order-first и .order-last , которые изменяют порядок элемента, применяя order order: -1 и order: 6 соответственно. Эти классы также могут применяться с нумерованными классами .order-* по мере необходимости.

Смещение колонок

Вы можете смещать колонки сетки двумя путями: с помощью отзывчивых классов .offset- и с помощью наших утилит интервалов. Классы сетки созданы так, чтобы совпадать с колонками, а отступы удобней для быстрого расположения элементов там, где ширина офсета непостоянна.

Классы смещения

Двигайте колонки вправо, используя классы .offset-md-* . Они увеличивают левый отступ колонки на * колонок. Например, класс .offset-md-4 двигает .col-md-4 на 4 колонки.

В дополнение к «сбросу» колонок на брейкпойнтах, вам может понадобиться сброс офсетов. Смотрите пример с разметкой.

Утилиты полей

С переходом на flexbox вы можете использовать утилиты полей, такие как .mr-auto , чтобы отодвинуть одноуровневые столбцы друг от друга.

Автономные классы колонок

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

Классы могут использоваться вместе с утилитами для создания адаптивных плавающих изображений. Обязательно оберните содержимое в оболочку .clearfix , чтобы очистить текст, если текст более короткий.

Адаптивное плавающее изображение

Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением.

Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать.

И тем не менее, здесь вы, по-прежнему настойчив в чтении этот текст-заполнитель, в надежде еще несколько прозрений, или некоторые скрытые пасхальные яйца содержания. Возможно, шутка. К сожалению, здесь ничего этого нет.

Источник

Использование Bootstrap 3 Как скрыть столбцы в моей таблице?

Я пытаюсь скрыть столбцы для моего отзывчивого дизайна, когда в col-xs и col-sm . Сначала я попытался использовать hidden-xs/hidden-sm классов, но это не сработало. Я также попытался использовать visible-desktop как уже упоминалось здесь: Twitter Bootstrap отзывчивый-показать столбец таблицы только на рабочем столе

Это тоже не сработало. Как лучше всего это сделать? Я предпочитаю не делать два отдельных стола, а затем скрывать один или другой.

код, который я пробовал, в настоящее время нет работа:

3 ответов

код должен работать нормально. Bootstrap поддерживает скрытие / отображение th и td С его отзывчивыми служебными классами https://github.com/twbs/bootstrap/blob/master/less/mixins.less#L504:

кажется hidden-xs/hidden-sm работал раньше, так как принятый ответ имеет много голосов, однако пример скрипки не работает для меня, когда я изменяю размер области. Что работает для меня, хотя противоположная логика с использованием visible-md/visible-lg . Я не могу понять, почему, потому что согласно документации Bootstrap все равно должен поддерживать hidden-xs/hidden-sm.

недавно я столкнулся с подобной проблемой, работая над отображением таблицы по-разному, в зависимости от размера экрана. Задача для меня заключалась в том, чтобы скрыть один столбец на большом экране и показать его на мобильном устройстве, скрывая три других столбца (столбец «один» — это сумма данных в Столбцах «три». Как и ответ выше, я использовал медиа-запрос, но полностью избавился от готовых представлений bootstrap. Я добавил классы в th и td теги участвует.

Источник

Скрыть колонку при ресайзе в bootstrap 4

При подключении bootstrap 4 текст разбивается на 2 колонки. Как сделать, чтобы при сжатии, например, к col-md вторая колонка пропадала и оставалась только первая.

2 ответа 2

Если хотите скрыть на xl, sm, md , то используйте .d-none .d-lg-block , что означает, что блок скрыт на разрешении xl, sm, md , но показан на lg

Табличка видимости.

1. Укажите блоку который необходимо скрыть классы .d-md-none .d-lg-block это означает, что на разрешении от 768 до 991 блок будет скрыт, начиная от 992 — будет виден.
2. Либо используйте медиа запросы для управления блоками @media (min-width: 768px) and (max-width: 991px)

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css bootstrap или задайте свой вопрос.

Связанные

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.11.5.40661

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Колонки

Узнайте, как изменять колонки с помощью нескольких опций для выравнивания, упорядочивания и смещения благодаря нашей системе сеток flexbox. Кроме того, узнайте, как использовать классы колонок для управления шириной элементов без сетки.

Как они работают

Колонки основаны на архитектуре Flexbox сетки. Flexbox означает, что у нас есть возможности для изменения отдельных колонок и модификации групп колонок на уровне строки. Вы выбираете, как колонки увеличиваются, уменьшаются или изменяются иным образом.

При построении макетов сетки весь контент размещается в колонках. Иерархия сетки Bootstrap идет от контейнера до строки к колонки Вашего содержимого. В редких случаях Вы можете комбинировать контент и колонку, но имейте в виду, что это может иметь непредвиденные последствия.

Bootstrap включает предопределенные классы для создания быстрых и отзывчивых макетов. Благодаря шести контрольным точкам и дюжине колонок на каждом уровне сетки у нас есть десятки классов уже построен для Вас, чтобы создавать желаемые макеты. При желании это можно отключить через Sass.

Выравнивание

Используйте утилиты выравнивания flexbox для вертикального и горизонтального выравнивания колонок.

Вертикальное выравнивание

Горизонтальное выравнивание

Обертывание колонок

Если в одной строке помещается более 12 колонок, каждая группа дополнительных колонок, как одно целое, переносится на новую строку.

Разрывы колонок

Разбиение колонок на новую строку в flexbox требует небольшого хака: добавьте элемент с width: 100% везде, где Вы хотите перенести колонки на новую строку. Обычно это достигается с помощью нескольких .row , но не каждый метод реализации может это учитывать.

Вы также можете применить этот разрыв в определенных контрольных точках с помощью наших утилит для адаптивного отображения.

Изменение порядка

Класса порядка

Используйте классы .order- для управления визуальным порядком Вашего контента. Эти классы отзывчивы, поэтому Вы можете установить order по контрольной точке (например, .order-1.order-md-2 ). Включает поддержку от 1 до 5 на всех шести уровнях сетки.

Существуют также адаптивные классы .order-first и .order-last , которые изменяют order элемента, применяя order: -1 и order: 6 соответственно. Эти классы также могут быть при необходимости смешаны с пронумерованными классами .order-* .

Смещение колонок

Вы можете смещать колонки сетки двумя способами: нашими адаптивными классами сетки .offset- и нашими утилитами полей. Классы сетки имеют размер, соответствующий колонкам, в то время как поля более полезны для быстрых макетов, где ширина смещения является переменной.

Классы смещения

Переместите колонки вправо, используя классы .offset-md-* . Эти классы увеличивают левое поле колонки на колонки * . Например, .offset-md-4 перемещает .col-md-4 на четыре колонки.

В дополнение к очистке колонки в адаптивных контрольных точках Вам может потребоваться сбросить смещения. См. это в действии в пример сетки.

Утилиты полей

С переходом на flexbox в v4 Вы можете использовать утилиты полей, такие как .me-auto , чтобы отодвинуть одноуровневые столбцы друг от друга.

Автономные классы колонок

Классы .col-* также могут использоваться вне .row , чтобы дать элементу определенную ширину. Когда классы колонок используются как непрямые дочерние элементы строки, отступы опускаются.

Классы можно использовать вместе с утилитами для создания гибких плавающих изображений. Убедитесь, что содержимое обернуто в оболочку .clearfix , чтобы очистить плавающее значение, если текст короче.

Адаптивное плавающее изображение

Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением.

Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать.

И тем не менее, здесь вы, по-прежнему настойчив в чтении этот текст-заполнитель, в надежде еще несколько прозрений, или некоторые скрытые пасхальные яйца содержания. Возможно, шутка. К сожалению, здесь ничего этого нет.

Bootstrap

• Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
• Код под лицензией MIT, документация CC BY 3.0.
• Текущая версия v5.0.2.

Источник