Я использую загрузочную систему 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 options
.col-xs-offset-* не существует.
Смещение и упорядочение столбцов - только для маленьких и более. (ТОЛЬКО .col-sm-offset-*, .col-md-offset-* и .col-lg-offset-*)
См. официальную документацию: bootstrap:: grid options
В качестве альтернативы вы можете добавить пустой div для xs-offset (сохраните вам управление контентом более чем в одном месте)
<div class="col-xs-1 visible-xs"></div><div class="col-xs-2">col</div>
Разработчики bootstrap, похоже, отказываются добавлять эти xs-наборы и классы 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, так что он тоже был продет, но во многих случаях будет избыточным.
/*
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;
}
}
Не работает, потому что col-xs-offset-* упоминается вне медиа-запроса. если вы хотите использовать его, вы должны упомянуть все смещения (например: class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0")
Но это неправильно, они должны указать col-xs-offset-* в медиа-запросе
//он работает в 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
Бутстрап css, используемый в ссылке jsfiddle, не имеет css для col-xs-offset- *, поэтому css не применяются. Обратитесь к последнему бутстрапу css.
Проблема в том, что вы кладете класс .name вместо nameclass
вместо использования col-md-offset-4 вместо offset-md-4 вам больше не нужно использовать col при смещении. В вашем случае используйте offset-xs-1, и это сработает. убедитесь, что вы вызвали папку bootstrap.css в свой html следующим образом.
В соответствии с последней версией bootstrap v3.3.7 разрешено xs-offseting. См. Документацию здесь загрузочное отключение. Таким образом, вы можете использовать
<div class="col-xs-2 col-xs-offset-1">.col-xs-2 .col-xs-offset-1</div>
На всякий случай кто-то делает ту же ошибку, что и я, прежде чем наткнуться на эту страницу, то есть добавить правила CSS reset (например популярный reset by Eric Meyer, используемый на миллионах сайтов) после, включая загрузку.
Кроме того, возможно, я должен указать, что такой reset не потребуется с bootstrap, данный bootsrap фактически реализует normalize.css v3.0.2 reset.
Удалите точку перед классом, чтобы она выглядела так:
<div class="col-xs-2 col-xs-offset-1">col</div>