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

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

<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 auto

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

Bootstrap 3 XS offset shim

  /*

  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-* в медиа-запросов

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 например

<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

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

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

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

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

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

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