Ребят, не получается сделать margin-top
для .row
класса, т.е. margin
для второго .row
идет не от предыдущего .row
, а от самого верха страницы.
Структура:
<div id="content">
<div class="row">
<div class="col-md-12 text-center">
...
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
...
</div>
</div>
</div>
Предположу, что не "от самого верха страницы" а от предыдущего блока.
Эффект схлопывания.
При рассмотрении блочной модели была затронута тема схлопывания отступов. Этот эффект наблюдается, когда у блочных элементов расположенных рядом друг с другом по вертикали, отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Этот эффект работает только для блоков, у которых не заданы поля и границы. Для отступов слева и справа схлопывание никогда не применяется.
Пример:
.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 class="container">
<div id="content">
<div class="row">
<div class="col-md-12 text-center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, assumenda?
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis deserunt temporibus aspernatur.
</div>
</div>
</div>
</div>
Решение: Применять один margin (margin-top;
или margin-bottom;
) . Или заменить на padding
.
Скорее всего, вы имеете дело со "схлопыванием отступов". Почитайте эту статью, в ней указано, из-за чего возникает и как справить.
https://habrahabr.ru/post/257327/
Перевод документов на английский язык: Важность и ключевые аспекты
Какие существуют виды рекламных бордов и как выбрать подходящий?
Должна быть картинка, градиент, и текст поверх всего этогоНикак не получается сделать, пробую разные приемы, ничего не срабатывает
Если блок не поместился на текущей странице в печатной форме, нужно сделать его перенос на следующую страницуКак можно реализовать?
Проблема в том что когда нажал на кнопку на странице и после открыл окно выбора даты datepicker, эта кнопка отрисовывается сверху окна datepicker