Bootstrap 3 .col-xs-offset- * не працює?

Я використовую сіткову систему bootstrap 3 до цього часу, і все працювало добре, я намагаюся використовувати col-xs-offset-1 і не працює, хоча .col-sm-offset-1 працює. Чого мені тут не вистачає?

<div class="col-xs-2 col-xs-offset-1">col</div>

http://jsfiddle.net/petran/zMcs5/2/

Редагувати: станом на Bootstrap 3.1 .col-xs-offset-* існує , див. Параметри bootstrap :: grid

.col-xs-offset-*не існує. Порядок зсуву та стовпців призначений лише для малих та більше. (ТІЛЬКИ .col-sm-offset-*, .col-md-offset-*і .col-lg-offset-*)

Дивіться офіційну документацію: параметри завантаження :: grid

Крім того, ви можете додати порожній div для зміщення xs (це заощадить вам необхідність керувати вмістом більше ніж в одному місці)

<div class="col-xs-1 visible-xs"></div><div class="col-xs-2">col</div>

Розробники bootstrap, схоже, відмовляються додавати ці xs-ofsets та push / pull класи, див. Тут: https://github.com/twbs/bootstrap/issues/9689

Ви можете отримати набір зсуву лише для пристроїв xs, заперечуючи вищі пікселі зі зміщенням 0. Як так,

class="col-xs-offset-1 col-md-offset-0"

Пропозиція щодо того, коли ви хочете зробити офсет, але виявитесь недієздатним на дуже малій ширині:

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

Приклад:

<div class="hero container">
  <div class="row">
    <div class="hidden-xs col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4 text-center">
      <h2>This is a banner at the top of my site. It shows in everything except XS</h2>
      <p>Here are some supporting details about my banner.</p>
    </div>
    <div class="visible-xs col-xs-12">
      <h2 class="pull-right">This is my banner at XS width.</h2>
      <p class="pull-right">This is my supporting content at XS width.</p>
    </div>
  </div>
</div>

col-md-offset-4 не працює, якщо ви вручну застосовуєте поле до того самого елемента. Наприклад

У наведеному вище коді зміщення застосовуватися не буде. Натомість буде застосовано поле 0

Це було справді неприємно, тому я написав суть, яку ви можете зрозуміти, що дозволяє col-offset-xs-*. Я також помітив, що Bootstrap SASS repo Bower, встановлений цього тижня, не включав, col-offset-sm-0тому він теж зашифрований, але в багатьох випадках буде зайвим.

Bootstrap 3 xs офсетна прокладка

  /*

  Include this after bootstrap.css

  Add a class of 'col-xs-offset-*' and 
  if you want to disable the offset at a larger size add in 'col-*-offset-0'

  Examples:
  All display sizes (xs,sm,md,lg) have an offset of 1
  <div class="col-xs-11 col-xs-offset-1 col-sm-3">

  xs has an offset of 1
  <div class="col-xs-11 col-xs-offset-1 col-sm-offset-0 col-sm-3">

  xs and sm have an offset of 1
  <div class="col-xs-11 col-xs-offset-1 col-md-offset-0 col-sm-3">

  xs, sm and md will have an offset of 1
  <div class="col-xs-11 col-xs-offset-1 col-lg-offset-0 col-sm-3">

*/

.col-xs-offset-12 {
    margin-left: 100%;
}
.col-xs-offset-11 {
    margin-left: 91.66666666666666%;
}
.col-xs-offset-10 {
    margin-left: 83.33333333333334%;
}
.col-xs-offset-9 {
    margin-left: 75%;
}
.col-xs-offset-8 {
    margin-left: 66.66666666666666%;
}
.col-xs-offset-7 {
    margin-left: 58.333333333333336%;
}
.col-xs-offset-6 {
    margin-left: 50%;
}
.col-xs-offset-5 {
    margin-left: 41.66666666666667%;
}
.col-xs-offset-4 {
    margin-left: 33.33333333333333%;
}
.col-xs-offset-3 {
    margin-left: 25%;
}
.col-xs-offset-2 {
    margin-left: 16.666666666666664%;
}
.col-xs-offset-1 {
    margin-left: 8.333333333333332%;
}
.col-xs-offset-0 {
    margin-left: 0;
}

/* Ensure that all of the zero offsets are available - recent SASS version did not include .col-sm-offset-0 */
@media (min-width: 768px) {
    .col-sm-offset-0,
    .col-md-offset-0,
    .col-lg-offset-0 {
        margin-left: 0;
    }
}

https://gist.github.com/dylanvalade/7362739

Він не працює, оскільки 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 не застосовується. Зверніться до останньої завантажувальної стрічки css.

Що стосується Boostrap 4.x, так само, як col-xs-6 тепер просто col-6

offset-xs-6 тепер просто offset-6 .

Вже спробував, безумовно працює.

Проблема в тому, що ви ставите клас .name замість nameclass

замість того, щоб використовувати col-md-offset-4, використовуйте замість offset-md-4, вам більше не доведеться використовувати col, коли ви виконуєте компенсацію. У вашому випадку використовуйте offset-xs-1, і це буде працювати. переконайтеся, що ви викликали папку bootstrap.css у свій html наступним чином.

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

<div class="row">
   <div class="offset-lg-3 col-lg-6"> Some content...
   </div>
</div>

// тут doc: http://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns

Відповідно до останньої завантажувальної програми v3.3.7 дозволено компенсацію xs. Див. Документацію тут щодо зміщення початкового завантаження . Тож можна використовувати

<div class="col-xs-2 col-xs-offset-1">.col-xs-2 .col-xs-offset-1</div>

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

Крім того, можливо, я повинен зазначити, що таке скидання не буде необхідним із завантажувальною програмою, якщо заданий bootrap фактично реалізує скидання normalize.css v3.0.2 .

Видаліть крапку перед вашим класом, щоб вона виглядала так:

<div class="col-xs-2 col-xs-offset-1">col</div>