css — Отступ между блоками в bootstrap
Вопрос задан
Изменён 5 лет 2 месяца назад
Просмотрен 21k раз
Привет всем, есть страница с тремя блоками с фиксированной высотой. Для адаптации блоков использую bootstrap. Если я задаю отступ между блоками, например: margin: 5px; то третий блок уходит под остальные блоки. Как решить такую проблему?
http://codepen.io/zagonicb/pen/YGbXXy
<html> <head> <meta charset="UTF-8" /> <title>first page</title> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous"> </head> <body> <div> <div> <!-- first block --> <div> <p>MARK MANSON</p> <p>The darkside of the digital normad</p> <a href="#">Travel</a> <a href="#">close</a> </div> <!--second block--> <div> <p> The acknowledgement that something came from another source. The following sentence properly attributes an idea to its original author: </p> <p> Jack Bauer, in his article "Twenty-Four Reasons not to Plagiarize," maintains that cases of plagiarists being expelled by academic institutions have risen dramatically in recent years due to an increasing awareness on the part of educators. </p> </div> <!--third block--> <div> <p>comments(45)</p> <ul> <li>comment 1</li> <li>comment 1</li> <li>comment 1</li> <li>comment 1</li> </ul> </div> </div> </div> </body> </html> .
flex-container { display: flex; align-items: center; height: 600px; } .block { height: 300px; margin-left: 5px; }
7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">
</head>
<body>
<div>
<div>
<!-- first block -->
<div>
<p>MARK MANSON</p>
<p>The darkside of the digital normad</p>
<a href="#">Travel</a>
<a href="#">close</a>
</div>
<!--second block-->
<div>
<p>
The acknowledgement that something came from another source. The following sentence properly attributes an idea to its original author:
</p>
<p>
Jack Bauer, in his article "Twenty-Four Reasons not to Plagiarize," maintains that cases of plagiarists being expelled by academic institutions have risen dramatically in recent years due to an increasing awareness on the part of educators.
</p>
</div>
<!--third block-->
<div>
<p>comments(45)</p>
<ul>
<li>comment 1</li>
<li>comment 1</li>
<li>comment 1</li>
<li>comment 1</li>
</ul>
</div>
</div>
</div>
</body>
</html>
.
- css
- bootstrap
1
Как решить такую проблему?
Не добавлять стили bootstrap блокам формирующим сетку. Создайте блок с class="block" внутри col- и добавляйте им нужные стили.
Например так:
.container {
height: 600px;
}
.block {
height: 300px;
}
@media (min-width: 992px){
.container {
width: 1200px;
}
}<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">
<div>
<div>
<!-- first block -->
<div >
<div>
<p>MARK MANSON</p>
<p>The darkside of the digital normad</p>
<a href="#">Travel</a>
<a href="#">close</a>
</div>
</div>
<!--second block-->
<div >
<div>
<p>
The acknowledgement that something came from another source. The following sentence properly attributes an idea to its original author:
</p>
<p>
Jack Bauer, in his article "Twenty-Four Reasons not to Plagiarize," maintains that cases of plagiarists being expelled by academic institutions have risen dramatically in recent years due to an increasing awareness on the part of educators.
</p>
</div>
</div>
<!--third block-->
<div >
<div>
<p>comments(45)</p>
<ul>
<li>comment 1</li>
<li>comment 1</li>
<li>comment 1</li>
<li>comment 1</li>
</ul>
</div>
</div>
</div>
</div>
The following sentence properly attributes an idea to its original author:
</p>
<p>
Jack Bauer, in his article "Twenty-Four Reasons not to Plagiarize," maintains that cases of plagiarists being expelled by academic institutions have risen dramatically in recent years due to an increasing awareness on the part of educators.
</p>
</div>
</div>
<!--third block-->
<div >
<div>
<p>comments(45)</p>
<ul>
<li>comment 1</li>
<li>comment 1</li>
<li>comment 1</li>
<li>comment 1</li>
</ul>
</div>
</div>
</div>
</div>Или же, если с фоном ячеек нужен изначальный вариант, то так:
.
container {
height: 600px;
}
.block {
height: 300px;
}
@media (min-width: 992px){
.container {
width: 1200px;
}
} <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">
<div>
<div>
<!-- first block -->
<div>
<div >
<p>MARK MANSON</p>
<p>The darkside of the digital normad</p>
<a href="#">Travel</a>
<a href="#">close</a>
</div>
</div>
<!--second block-->
<div>
<div >
<p>
The acknowledgement that something came from another source. The following sentence properly attributes an idea to its original author:
</p>
<p>
Jack Bauer, in his article "Twenty-Four Reasons not to Plagiarize," maintains that cases of plagiarists being expelled by academic institutions have risen dramatically in recent years due to an increasing awareness on the part of educators.
</p>
</div>
</div>
<!--third block-->
<div>
<div>
<p>comments(45)</p>
<ul>
<li>comment 1</li>
<li>comment 1</li>
<li>comment 1</li>
<li>comment 1</li>
</ul>
</div>
</div>
</div>
</div>
The following sentence properly attributes an idea to its original author:
</p>
<p>
Jack Bauer, in his article "Twenty-Four Reasons not to Plagiarize," maintains that cases of plagiarists being expelled by academic institutions have risen dramatically in recent years due to an increasing awareness on the part of educators.
</p>
</div>
</div>
<!--third block-->
<div>
<div>
<p>comments(45)</p>
<ul>
<li>comment 1</li>
<li>comment 1</li>
<li>comment 1</li>
<li>comment 1</li>
</ul>
</div>
</div>
</div>
</div>2
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через FacebookРегистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
html — Margin после row Bootstrap
Вопрос задан
Изменён 6 лет 4 месяца назад
Просмотрен 917 раз
Ребят, не получается сделать margin-top для . класса, т.е. 
rowmargin для второго .row идет не от предыдущего .row, а от самого верха страницы.
Структура:
<div>
<div>
<div>
...
</div>
</div>
<div>
<div>
...
</div>
</div>
</div>
- html
- css
- bootstrap
1
Предположу, что не «от самого верха страницы» а от предыдущего блока.
Эффект схлопывания.
При рассмотрении блочной модели была затронута тема схлопывания отступов. Этот эффект наблюдается, когда у блочных элементов расположенных рядом друг с другом по вертикали, отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один.
Этот эффект работает только для блоков, у которых не заданы поля и границы. Для отступов слева и справа схлопывание никогда не применяется.
Пример:
.row {
border: 1px solid #000;
margin-top: 20px;
margin-bottom: 30px;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<div>
<div>
<div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, assumenda?
</div>
</div>
<div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis deserunt temporibus aspernatur.
</div>
</div>
</div>
</div> Решение: Применять один margin (margin-top; или margin-bottom;) . Или заменить на padding.
2
Скорее всего, вы имеете дело со «схлопыванием отступов». Почитайте эту статью, в ней указано, из-за чего возникает и как справить.
https://habrahabr.ru/post/257327/
1
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Bootstrap Spacing — примеры и руководство
Расстояние
MDB включает в себя широкий спектр служебных классов полей и отступов, которые можно модифицировать.
внешний вид элемента.
Как это работает
Назначьте адаптивные значения margin или padding элементу или
подмножество его сторон с сокращенными классами. Включает поддержку отдельных свойств, всех
свойства, а также вертикальные и горизонтальные свойства. Классы строятся из карты Sass по умолчанию.
от .25rem до 3rem .
Примечание: Если вы хотите добавить поле к левой стороне , вы должны использовать класс мс-* (начальное поле) вместо мл-* (левое поле).
Аналогично для поля справа : вместо этого вы должны использовать класс me-* (конец поля) мр-* (поле справа).
Ниже приведен пример использования классов для правое поле с визуальным представлением их размеров.
Одни и те же размеры применяются ко всем направлениям (влево, вправо, вверх, вниз), а также к полям и отступам.
| Название класса | Размер | Визуальное представление |
|---|---|---|
.me-1 | 0,25 бэр | |
.me-2 | 0,5рем | |
.me-3 | 1рем | |
.me-4 | 1,5рем | |
.me-5 | 3рем |
Обозначение
Утилиты интервалов, которые применяются ко всем точкам останова, от xs до xxl ,
в них нет аббревиатуры точки останова.
Это потому, что эти классы применяются из min-width: 0 и выше, и поэтому не связаны медиа-запросом. Остальные
точки останова, однако, содержат аббревиатуру точки останова.
Классы именуются в формате {свойство}{стороны}-{размер} для xs и {свойство}{стороны}-{точка останова}-{размер} для см , мкр , lg , xl и xxl .
Где свойство является одним из:
-
м— для классов, которые устанавливаютзапас -
p— для классов, которые устанавливаютpadding
Где сторон является одной из:
-
t— для классов, которые устанавливаютmargin-topилиобивка -
b— для классов, которые устанавливаютmargin-bottomилинабивка-дно -
s— (начало) для классов, которые устанавливаютmargin-leftилизаполнение слева -
e— (конец) для классов, которые устанавливаюткрай-справаилизаполнение справа -
x— для классов, которые устанавливают оба*-leftи*-справа -
y— для классов, которые устанавливают как*-top, так и*-низ - пусто — для классов, которые устанавливают
полейилиотступовна всех 4-х сторонах элемент
Где размер является одним из:
-
0— для классов, исключающих полядополнение, установив его на0 -
1— (по умолчанию) для классов, которые устанавливают маржупрокладка отдо$spacer * . 25 -
2— (по умолчанию) для классов, которые устанавливают маржупрокладка отдо$spacer * .5 -
3— (по умолчанию) для классов, которые устанавливают маржуотступы отдо$spacer -
4— (по умолчанию) для классов, которые устанавливают маржупрокладка отдо$spacer * 1,5 -
5— (по умолчанию) для классов, которые устанавливают маржупрокладка отдо$spacer * 3 -
auto— для классов, которые устанавливают маржу
25 (Вы можете добавить больше размеров, добавив записи в переменную карты $spacers Sass.
)
Примеры
Вот несколько репрезентативных примеров этих классов:
Показать код Изменить в песочнице
.mt-0 {
верхняя граница: 0 !важно;
}
.мс-1 {
левое поле: ($spacer * .25) !важно;
}
.px-2 {
padding-left: ($spacer * .5) !важно;
padding-right: ($spacer * .5) !важно;
}
.p-3 {
заполнение: $спейсер !важно;
}
Горизонтальное центрирование
Кроме того, Bootstrap также включает класс .mx-auto для горизонтального
центрирование контента на уровне блока фиксированной ширины, т. е. контента,
Отображение : блок и установка ширины — путем установки горизонтальных полей
до авто .
Центральный элемент
Показать код Изменить в песочнице
Элемент по центру
Отрицательное поле
В CSS свойства margin могут использовать отрицательные значения ( padding не могу). Эти отрицательные поля отключены по умолчанию , но могут быть включены
в Sass, установив $enable-negative-margins: true .
Синтаксис почти такой же, как у утилит с положительной маржой по умолчанию, но с
добавление n перед запрошенным размером. Вот пример класса, который
напротив .mt-1 :
Показать код Изменить в песочнице
. mt-n1 {
margin-top: -0.25rem !важно;
}
mt-n1 {
margin-top: -0.25rem !важно;
}
Зазор
При использовании display: grid вы можете использовать утилиты gap на
контейнер родительской сетки. Это может сэкономить на необходимости добавлять маржинальные утилиты к отдельной сетке.
элементы (дочерние элементы дисплея : контейнер grid ). Утилиты Gap реагируют на
по умолчанию и генерируются через API наших утилит на основе $spacers Sass
карта.
Элемент сетки 1
Элемент сетки 2
Элемент сетки 3
Показать код Изменить в песочнице
<дел>
Элемент сетки 1
Элемент сетки 2
Элемент сетки 3
Здесь нет 
float-right 
mx-auto 
Они работают для всех точек останова: 
25rem 
5rem 
m-# / m-*-# 
pt-# / pt-*-# 
Они добавляют только 
Примечание: Этот класс не работает в IE11 и более ранних версиях (будет трактовать его как 
text- приглушенный 
Предупреждающая ссылка.
Ссылка на опасность.
Вторичная ссылка.
Темно-серая ссылка.
Тело/черная ссылка.
Светло-серая ссылка.
font-weight-bolder 
text-decoration-none 
text-uppercase 
list-inline-item 
d-нет 
d-таблица-ячейка 
com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html {background-color: #fff;}
body {
background-color: orange;
padding: 5% 15%;
margin: 2% 29%;
}
h2, h4{ text-align: center;}
</style>
</head>
<body>
<h2>Внимание! Внимание!</h2>
<h4>Осенняя распродажа мужской обуви!</h4>
</body>
</html>
01.2018
От Админ
3 комментария
25
в нижней части примера размещены классы, в которых одна или 2 стороны имеют 
5em; }
.padding-right-md { padding-right: 1em; }
.padding-right-lg { padding-right: 1.5em; }
.padding-right-xl { padding-right: 3em; }
.padding-bottom-xs { padding-bottom: .25em; }
.padding-bottom-sm { padding-bottom: .5em; }
.padding-bottom-md { padding-bottom: 1em; }
.padding-bottom-lg { padding-bottom: 1.5em; }
.padding-bottom-xl { padding-bottom: 3em; }
.padding-left-xs { padding-left: .25em; }
.padding-left-sm { padding-left: .5em; }
.padding-left-md { padding-left: 1em; }
.padding-left-lg { padding-left: 1.5em; }
.padding-left-xl { padding-left: 3em; }
.margin-xs {маржа: .25em; }
.margin-sm {маржа: .5em; }
.margin-md {маржа: 1em; }
.margin-lg {маржа: 1,5 em; }
.margin-xl {маржа: 3em; }
.margin-x-xs {маржа: .25em 0; }
.margin-x-sm {маржа: .5em 0; }
.margin-x-md {маржа: 1em 0; }
.margin-x-lg {маржа: 1.5em 0; }
.margin-x-xl {маржа: 3em 0; }
.margin-y-xs {маржа: 0,25em; }
.margin-y-sm {маржа: 0,5em; }
.margin-y-md {маржа: 0 1em; }
.margin-y-lg {маржа: 0 1.5em; }
.margin-y-xl {маржа: 0 3em; }
.
margin-top-xs { margin-top: .25em; }
.margin-top-sm { margin-top: .5em; }
.margin-top-md { margin-top: 1em; }
.margin-top-lg { margin-top: 1.5em; }
.margin-top-xl {margin-top: 3em; }
.margin-right-xs { margin-right: .25em; }
.margin-right-sm { margin-right: .5em; }
.margin-right-md {margin-right: 1em; }
.margin-right-lg { margin-right: 1.5em; }
.margin-right-xl {margin-right: 3em; }
.margin-bottom-xs { margin-bottom: .25em; }
.margin-bottom-sm { margin-bottom: .5em; }
.margin-bottom-md { margin-bottom: 1em; }
.margin-bottom-lg { margin-bottom: 1.5em; }
.margin-bottom-xl { margin-bottom: 3em; }
.margin-left-xs {margin-left: .25em; }
.margin-left-sm {margin-left: .5em; }
.margin-left-md {margin-left: 1em; }
.margin-left-lg { margin-left: 1.5em; }
.margin-left-xl {margin-left: 3em; }
mr-3 {margin-right:1rem!important; }
.mb-3 { margin-bottom:1rem!important; }
.ml-3 {margin-left:1rem!important; }
.mx-3 {поле-справа:1rem!важно;поле-слева:1rem!важно; }
.my-3 {нижняя граница: 1рем!важно;верхняя граница:1рем!важно; }
.mt-4 {margin-top:1.5rem!important; }
.mr-4 { margin-right:1.5rem!important; }
.mb-4 { margin-bottom:1.5rem!important; }
.ml-4 {margin-left:1.5rem!important; }
.mx-4 {поле-справа:1.5rem!важно;поле-слева:1.5rem!важно; }
.my-4 { Верхнее поле: 1,5 рем! важно; нижняя маржа: 1,5 рем! важно; }
.mt-5 {margin-top:3rem!important; }
.mr-5 {margin-right:3rem!important; }
.mb-5 {нижняя граница: 3rem! важно; }
.ml-5 {margin-left:3rem!important; }
.mx-5 {поле-справа:3rem!важно;поле-слева:3rem!важно; }
.my-5 {верхнее поле: 3рем!важно;нижнее поле:3рем!важно; }
.mt-auto {margin-top:auto!important; }
.mr-auto {margin-right:auto!important; }
.mb-auto { margin-bottom:auto!important; }
.ml-auto {margin-left:auto!important; }
.mx-auto {поле-справа:авто!важно;поле-слева:авто!важно; }
.
my-auto {нижняя маржа: авто!важно;верхняя маржа:авто!важная; }
.p-0 { заполнение: 0! важно; }
.p-1 { padding:.25rem!important; }
.p-2 { padding:.5rem!important; }
.p-3 { padding:1rem!important; }
.p-4 { padding:1.5rem!важно; }
.p-5 { padding:3rem!important; }
.pt-0 { padding-top:0!важно; }
.pr-0 { padding-right:0!важно; }
.pb-0 { padding-bottom:0!важно; }
.pl-0 { padding-left:0!важно; }
.px-0 { padding-left:0!важно;padding-right:0!важно; }
.py-0 { padding-top:0!важно;padding-bottom:0!важно; }
.pt-1 { padding-top:.25rem!important; }
.pr-1 { padding-right:.25rem!important; }
.pb-1 { padding-bottom:.25rem!important; }
.pl-1 { padding-left:.25rem!important; }
.px-1 { padding-left:.25rem!важно;padding-right:.25rem!важно; }
.py-1 { padding-top:.25rem!важно;padding-bottom:.25rem!важно; }
.pt-2 { padding-top:.5rem!important; }
.pr-2 { padding-right:.5rem!important; }
.pb-2 { padding-bottom:.5rem!important; }
.pl-2 { padding-left:.5rem!important; }
.px-2 { padding-right:.5rem!важно;padding-left:.
5rem!важно; }
.py-2 { padding-top:.5rem!важно;padding-bottom:.5rem!важно; }
.pt-3 { padding-top:1rem!important; }
.pr-3 { padding-right:1rem!important; }
.pb-3 { padding-bottom:1rem!important; }
.pl-3 { padding-left:1rem!important; }
.py-3 { заполнение снизу: 1rem! важно; заполнение сверху: 1rem! важно; }
.px-3 { padding-right:1rem!важно;padding-left:1rem!важно; }
.pt-4 { padding-top:1.5rem!important; }
.pr-4 { padding-right:1.5rem!important; }
.pb-4 { padding-bottom:1.5rem!important; }
.pl-4 { padding-left:1.5rem!important; }
.px-4 { padding-right:1.5rem!важно;padding-left:1.5rem!важно; }
.py-4 { padding-top:1.5rem!важно;padding-bottom:1.5rem!важно; }
.pt-5 { padding-top:3rem!important; }
.pr-5 { padding-right:3rem!important; }
.pb-5 { padding-bottom:3rem!important; }
.pl-5 { padding-left:3rem!important; }
.px-5 { padding-right:3rem!важно;padding-left:3rem!важно; }
.py-5 { padding-top: 3rem! важно; padding-bottom: 3rem! важно; }
См. Документацию Bootstrap 4.0 — Интервалы.
Вот ссылка
5em; }
.p-l-sm { padding-left: .5em; }
.m-sm { поле: .5em; }
.m-x-sm { поле: 0,5em; }
.m-y-sm { поля: .5em 0 ; }
.m-t-sm {margin-top: .5em; }
.m-r-sm { margin-right: .5em; }
.m-b-sm { нижняя граница: .5em; }
.m-l-sm { поле слева: .5em; }
}
/*мд*/
@media (минимальная ширина: 992px){
.p-md { заполнение: 1em; }
.p-x-md { заполнение: 0 1em; }
.p-y-md { заполнение: 1em 0; }
.p-t-md { padding-top: 1em; }
.p-r-md { padding-right: 1em; }
.p-b-md { padding-bottom: 1em; }
.p-l-md { padding-left: 1em; }
.m-md { поле: 1em; }
.m-x-md { поле: 0 1em; }
.m-y-md { поле: 1em 0 ; }
.m-t-md { margin-top: 1em; }
.m-r-md { margin-right: 1em; }
.m-b-md { нижняя граница: 1em; }
.m-l-md { поле слева: 1em; }
}
/*lg*/
@media (минимальная ширина: 1200 пикселей){
.p-lg { заполнение: 1.5em; }
.p-x-lg { padding: 0 1.5em; }
.p-y-lg { заполнение: 1.5em 0; }
.p-t-lg { padding-top: 1.5em; }
.p-r-lg { padding-right: 1.5em; }
.p-b-lg { padding-bottom: 1.5em; }
.p-l-lg { padding-left: 1.5em; }
.m-lg { поля: 1.5em; }
.m-x-lg { поля: 0 1.
5em; }
.m-y-lg { поля: 1.5em 0; }
.m-t-lg { margin-top: 1.5em; }
.m-r-lg { margin-right: 1.5em; }
.m-b-lg { нижняя граница: 1.5em; }
.m-l-lg { margin-left: 1.5em; }
}
/*XL*/
.p-xl { заполнение: 3em; }
.p-x-xl { заполнение: 0 3em; }
.p-y-xl { заполнение: 3em 0 ; }
.p-t-xl { padding-top: 3em; }
.p-r-xl { padding-right: 3em; }
.p-b-xl { padding-bottom: 3em; }
.p-l-xl { padding-left: 3em; }
.m-xl {поле: 3em; }
.m-x-xl { поле: 0 3em; }
.m-y-xl { поле: 3em 0; }
.m-t-xl {margin-top: 3em; }
.m-r-xl {поле-справа: 3em; }
.m-b-xl { нижняя граница: 3em; }
.m-l-xl {поле слева: 3em; }``
25
2 — (по умолчанию) для классов, которые устанавливают поля или отступы равными $spacer * .5
3 — (по умолчанию) для классов, которые устанавливают поля или отступы в $spacer
4 — (по умолчанию) для классов, которые устанавливают поля или отступы равными $spacer * 1,5.
5 — (по умолчанию) для классов, которые устанавливают поля или отступы равными $spacer * 3 
25
2 — (по умолчанию) для классов, которые устанавливают поля или отступы равными $spacer * .5
3 — (по умолчанию) для классов, которые устанавливают поля или отступы в $spacer
4 — (по умолчанию) для классов, которые устанавливают поля или отступы равными $spacer * 1,5.
5 — (по умолчанию) для классов, которые устанавливают поля или отступы равными $spacer * 3
auto — для классов, которые устанавливают маржу на auto
(Вы можете добавить больше размеров, добавив записи в переменную карты $spacers Sass.)
Вы можете использовать 
Он работает по желанию и может аналогичным образом следовать для других размеров экрана. 🙂
Может ли кто-нибудь помочь мне в этом отношении, спасибо: