Bootstrap offset col не работает

Бутстрап 3.col-xs-offset — * не работает?

Я использую bootstrap 3 grid system любил его до сих пор, и все работало хорошо, Я пытаюсь использовать col-xs-offset-1 и не работает, хотя .col-sm-offset-1 работает. Я что-то упускаю ?

15 ответов

Edit: начиная с Bootstrap 3.1 .col-xs-offset-* существует см. bootstrap:: параметры сетки

.col-xs-offset-* не существует. Смещение и порядок столбцов предназначены только для небольших и более. (Только .col-sm-offset-* , .col-md-offset-* и .col-lg-offset-* )

посмотреть официальную документацию : bootstrap:: параметры сетки

кроме того, вы можете добавить пустой div для XS-offset (это избавит вас от необходимости управлять контентом в нескольких местах)

разработчики bootstrap, похоже, отказываются добавлять эти XS-ofsets и push/pull классы, см. здесь:https://github.com/twbs/bootstrap/issues/9689

вы можете получить набор смещений только для XS-устройств, отрицая более высокие пиксели со смещением 0. Вот так,

предложение, когда вы хотите сделать смещение, но окажетесь неспособными на дополнительных малых ширинах:

использовать .hidden-xs и .visible-xs чтобы сделать одну версию вашего html-блока для дополнительных небольших Ширин и одну для всего остального (где вы все еще можете использовать смещение)

пример:

col-md-offset-4 не работает, если вы вручную применяете маржу к тому же элементу. Например

В приведенном выше коде, смещения не будет. Вместо этого будет применяться маржа 0 auto

Это было очень неприятно, поэтому я написал суть, которую вы можете захватить, что позволяет col-offset-xs-* . Я также заметил, что Bootstrap Sass repo Bower, установленный на этой неделе, не включал col-offset-sm-0 Так что это тоже переливается, но во многих случаях будет избыточным.

не работает, потому что col-xs-offset-* упоминается из медиа-запроса. если вы хотите использовать его, вы должны упомянуть все смещения (например: class=»col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0″ )

но это неправильно, они должны упомянуть col-xs-offset-* в медиа-запросов

загрузочный css, используемый в ссылке jsfiddle, не имеет css для col-xs-offset -*, поэтому css не применяется. См. последнюю версию bootstrap css.

проблема в том, что вы ставите .имя класса вместо nameclass

вместо использования col-md-offset-4 Используйте вместо offset-md-4, вам больше не нужно использовать col, когда вы компенсируете. В вашем случае используйте offset-xs-1, и это будет работать. убедитесь, что вы вызвали bootstrap.папки CSS в HTML следующим образом .

// он работает в bootstrap 4, были некоторые изменения в документации.Нам не нужен префикс col -, просто смещение-lg-3 например

согласно последней версии bootstrap v3.3.7 xs-offseting допускается. Смотрите документацию здесь bootstrap offseting. Таким образом, вы можете использовать

на случай, если кто — то сделает ту же ошибку, что и я, прежде чем наткнуться на эту страницу, то есть добавив CSS сброс правил (например,очень популярный сброс Эрика Мейера используется на миллионах сайтов) после включая bootstrap.

кроме того, возможно, я должен указать, что такой сброс не будет необходим с bootstrap, учитывая, что bootsrap фактически реализует нормализовать.css v3.0.2 сброс.

Источник

Bootstrap 3 .col-xs-offset-* doesn’t work?

I am using bootstrap 3 grid system loved it so far and everything was working well, I am trying to use col-xs-offset-1 and doesn’t work although .col-sm-offset-1 works. What am I missing here ?

16 Answers 16

Edit: as of Bootstrap 3.1 .col-xs-offset-* does exist, see bootstrap :: grid options

.col-xs-offset-* doesn’t exist. Offset and column ordering are only for small and more. (ONLY .col-sm-offset-* , .col-md-offset-* and .col-lg-offset-* )

See the official documentation : bootstrap :: grid options

Alternatively, you can add an empty div for the xs-offset (would save you having to manage the content in more than one place)

The bootstrap devs seem to be refusing to add those xs- ofsets and push/pull classes, see here: https://github.com/twbs/bootstrap/issues/9689

You could get the offset set only for xs devises by negating the higher pixels with 0 offset. Like so,

A suggestion for when you want to do an offset but find yourself incapable at extra small widths:

Use .hidden-xs and .visible-xs to make one version of your html block for extra small widths, and one for everything else (where you can still use an offset)

Example:

col-md-offset-4 does not work if you manually apply margin to the same element. For example

In the above code, offset will not be applied. Instead a margin of 0 auto will be applied

This was really frustrating so I wrote a gist you can grab that enables col-offset-xs-* . I also noticed that Bootstrap SASS repo Bower installed this week did not include col-offset-sm-0 so that is shimmed too but will be redundant in many cases.

Its not working because col-xs-offset-* is mentioned out of the media query. if you want to use it, you have to mention all the offset (eg: class=»col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0″ )

But this is not right, they should mention col-xs-offset-* in the media query

The bootstrap css used in the jsfiddle link, dont have the css for col-xs-offset-*, thats why the css are not been applied. Refer the latest bootstrap css.

As of Boostrap 4.x, just as col-xs-6 is now just col-6

offset-xs-6 is now just offset-6.

Already tried it, definitely works.

The problem is that you’re putting .name class instead of nameclass

instead of using col-md-offset-4 use instead offset-md-4, you no longer have to use col when you’re offsetting. In your case use offset-xs-1 and this will work. make sure you’ve called the bootstrap.css folder into your html as follows .

// it works in bootstrap 4, there was some changes in documentation.We dont need prefix col-, just offset-lg-3 e.g.

As per the latest bootstrap v3.3.7 xs-offseting is allowed. See the documentation here bootstrap offseting. So you can use

Just in case someone makes the same error I did before stumbling on this page, that is, adding CSS reset rules (like the very popular reset by Eric Meyer used on millions of websites) after including bootstrap.

Источник

Bootstrap col-md-offset — * не работает

Я пытаюсь добавить класс Bootstrap offset в свой код для достижения выравнивания по диагонали следующим образом:

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

Пожалуйста, направьте меня.Заранее спасибо.

9 ответов:

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

. Таким образом, способ достижения этой цели с помощью col-*-offset-* будет следующим:

По существу, первая строка должна охватывать всю строку (so -12). Вторая строка должна быть смещена на 1 столбец, поэтому вы смещаете на 1 и даете ей общую ширину 11 столбцов (11+1 = 12) и так далее. Вашего смещения всегда достаточно, чтобы гарантировать, что общее количество столбцов равно 12.

Он работает в bootstrap 4, там были некоторые изменения в документации.Нам не нужен префикс col -, просто offset-md-3 например

Изменение col-md-offset-* на offset-md-* сработало для меня

Это неверно, потому что bootstrap использует margin-left:* * %

Где проблема

В вашем HTML все h2 имеют одинаковый набор из 4 столбцов, поэтому они не будут делать диагональ.

Как это исправить

A row имеет 12 столбцов, поэтому мы должны поместить каждый h2 в свой row . У вас должно быть что-то вроде этого:

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

Классы смещения Bootstrap 4 были удалены в бета-версии 1, но будут восстановлены в бета-версии 2 — Ссылка на тему

На данный момент, если вы хотите переместить столбец только на 4 единицы столбца, например, я бы предложил использовать только фиктивный заполнитель, как в моем примере ниже

Если вы в порядке с небольшой настройкой — мы знаем, что bootstrap работает с шириной 12

Я уверен, что есть лучший способ сделать это, но я спешил, поэтому использовал этот трюк

Источник

Bootstrap 3.col-xs-offset — * не работает?

Я использую bootstrap 3 grid system любил его до сих пор, и все работало хорошо, Я пытаюсь использовать col-xs-offset-1 и не работает, хотя .col-sm-offset-1 работает. Чего мне здесь не хватает ?

15 ответов:

изменить: начиная с Bootstrap 3.1 .col-xs-offset-* существует см. bootstrap:: grid options

.col-xs-offset-* не существует. Смещение и упорядочение столбцов предназначены только для небольших и более. (Только .col-sm-offset-* , .col-md-offset-* и .col-lg-offset-* )

смотрите официальную документацию:bootstrap:: grid options

кроме того, вы можете добавить пустой div для XS-offset (это избавит вас от необходимости управлять содержимым более чем в одном месте)

разработчики bootstrap, похоже, отказываются добавлять эти XS-ofsets и push/pull классы, см. здесь:https://github.com/twbs/bootstrap/issues/9689

вы можете получить смещение, установленное только для устройств xs, отрицая более высокие пиксели с 0 смещением. Вот так,

предложение для того, когда вы хотите сделать смещение, но окажетесь неспособными на очень малых ширинах:

использовать .hidden-xs и .visible-xs чтобы сделать одну версию вашего html-блока для дополнительной малой ширины, а другую для всего остального (где вы все еще можете использовать смещение)

col-md-offset-4 не работает, если вы вручную применяете маржу к тому же элементу. Например

В приведенном выше коде, смещения не будет. Вместо этого будет применено поле 0 auto

Это было очень неприятно, поэтому я написал суть, которую вы можете захватить, что позволяет col-offset-xs-* . Я также заметил, что Bootstrap Sass repo Bower, установленный на этой неделе, не включал col-offset-sm-0 Так что это тоже мерцает, но во многих случаях будет избыточным.

не работает, потому что col-xs-offset-* упоминается из медиа-запроса. если вы хотите использовать его, вы должны упомянуть все смещения (например: class=»col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0″ )

но это не правильно, они должны упомянуть col-xs-offset-* в медиа-запросов

bootstrap css, используемый в ссылке jsfiddle, не имеет css для col-xs-offset -*, поэтому css не применяются. См. последнюю версию Bootstrap css.

проблема в том, что вы ставите .name класс вместо nameclass

вместо использования col-md-offset-4 Используйте вместо offset-md-4, вам больше не нужно использовать col, когда вы компенсируете. В вашем случае используйте offset-xs-1 и это будет работать. убедитесь, что вы вызвали bootstrap.папки CSS в HTML следующим образом .

// он работает в bootstrap 4, были некоторые изменения в документации.Нам не нужен префикс col -, просто offset-lg-3 например

согласно последней версии bootstrap v3.3.7 xs-offseting допускается. Смотрите документацию здесь bootstrap offseting. Так что вы можете использовать

на всякий случай, если кто-то сделает ту же ошибку, что и я, прежде чем наткнуться на эту страницу, то есть добавить CSS сброс правил (например,очень популярный сброс Эрика Мейера используется на миллионах сайтов) после включая bootstrap.

кроме того, возможно, я должен указать, что такой сброс не будет необходим с bootstrap, учитывая, что bootsrap фактически реализует нормализовать.УСБ В3.0.2 сброс.

удалите точку перед вашим классом, чтобы она выглядела так:

Источник

bootstrap 4 offset не работает

Я использую Boostrap 4 (Bootstrap v4.0.0-beta) Beta и сталкиваются с проблемами со смещением столбцов. Раньше я делал offset-md — *, и он работал, а BS4 Beta удаляется в соответствии с документами. Новый метод, упомянутый в документах, использует .ml-auto, когда я пытаюсь использовать его с col-md-4, он компенсирует 4 столбца. То, что я хочу, является настраиваемой коррекцией, например

Я попытался использовать

но не работал Это ошибка или есть другой способ сделать это?

В бета-версии 1 были удалены классы Bootstrap 4 offset , но будут восстановлены в Beta 2

Новая замена автоматической маржи для смещения будет перемещать столбец как можно больше. Таким образом, это зависит от того, сколько вы хотите «толкнуть» столбец вправо. Если у них нет других столбцов справа от col-md-4 , он будет проходить весь путь, если в правой части row . В основном offset имел значение для плавающих столбцов, но теперь больше не актуально, что Bootstrap 4 является flexbox.

Если вы хотите переместить col-md-4 только на два столбца, лучшим способом будет использование столбца фиктивного/заполнителя.

Если есть другие col-md-4 справа от первого, тогда ml-auto и mr-auto будут работать с центрами обоих столбцов.

Если вы хотите центрировать col-md-4 , просто используйте mx-auto для для создания равных полей с обеих сторон.

Мощная система гибких сеток для мобильных устройств, для удобной верстки и расположения элементов любых видов и размеров. Используется система «12 колонок», 5-ти адаптивных ярусов, препроцессоров Sass и десятков предустановленных классов.

Как это устроено

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

В данном примере с помощью наших предустановленных классов сеток были созданы 3 колонки равной ширины для маленьких, средних и больших девайсов. Эти колонки выровнены с помощью родительского класса .container .

Вот небольшое объяснение работы Bootstrap 4:

• Инструмент для центровки контента сайта. Используйте класс .container для фиксированной ширины или .container-fluid для 100%-ной ширины.
• Ряды – это обертка для колонок. Каждая колонка имеет горизонтальный padding (называемый gutter) для контроля пространства между колонками. Этот padding (паддинг) влияет на ряды с отрицательным марджином. В этом случае все содержимое ваших колонок будет визуально центрировано внизу с левой стороны.
• Содержимое должно быть расположено в колонках, и только колонки могут быть расположены в рядах.
• Благодаря флексбоксу колонки сетки без установленного атрибута «ширина» автоматически получают равную ширину. Например, четыре экземпляра класса .col-sm автоматически (на малых контрольных точках) получат ширину одной колонки = 25%. Подробнее смотрите раздел Автоматическое расположение с помощью колонок.
• Цифры в наименовании классов колонок показывают, сколько колонок из 12-ти возможных в ряду вы бы хотели использовать. Так, если вы хотите использовать три колонки одной ширины, используйте .col-sm-4 .
• Ширина колонок width задана в процентах, что позволяет колонкам быть гибкими и изменять размер относительно их родительского элемента.
• Колонки имеют горизонтальный паддинг padding для создания отступов между отдельными колонками, но вы можете удалить марджины margin из рядов и паддинги padding из колонок, добавив класс .no-gutters в .row .
• Есть 5 «ярусов» сеток, по одному для каждого «брейкпойнта»: все контрольные точки (экстра маленький), маленький, средний, большой и экстрабольшой.
• Ярусы сетки основаны на минимальной широте, т.е. они подходят для каждого вышестоящего яруса (т.е., .col-sm-4 подходит для маленьких, средних, больших и XL девайсов).
• Вы можете использовать предопределенные классы сетки (например .col-4 ) или препроцессоры Sass для создания своей разметки.

Параметры сеток

Бутстрап использует em и rem для задания большинства размеров, а пиксели px – для «брейкпойнтов» сетки и ширин контейнеров. Это происходит потому, что ширина зоны видимости на каждом устройстве измеряется в пикселях и не изменяется с размером шрифта.

Посмотрим, как действуют некоторые аспекты системы сеток Bootstrap на разных «ручных» устройствах.

Extra small .col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
Число колонок	12
Ширина отступа	30px (15px с каждой стороны столбца)
Может быть вложенным	Да
Упорядочивание колонок	Да

Автоматическое расположение с помощью колонок

Используйте классы колонок со специальными контрольными точками (например, .col-sm-6 ) для легкого расположения колонок без использования явно обозначенных номеров классов.

Равная ширина

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

Только сегодня начал изучать Bootstrap и сразу жесткий «затык». Верстаю первый блок, не работают отступы колонок. Колонки прижаты друг к другу, отступ справа от крайней колонки. Внимательно изучаю сотни обучающих статей — у всех работает, у меня нет. Попеременно подключаю разные файлы — bootstrap.min.css — bootstrap.css — bootstrap-grid.css. Результата 0. Пробую все те же манипуляции с sm, md, lg. Ничего. Упрощаю страницу максимально. Не работает. Вот код

Почему колонки прижаты друг к другу и нет отступа? Я уже не знаю, что еще предпринять.

Источник