На bootstrap 3 я не могу сделать макет, как я хочу, и я не понимаю, почему.
Мой HTML:
<div class="container">
<div id="row1" class="row">
<div class="col-lg-4 col-lg-push-8 col-md-4 col-md-push-8 col-sm-push-8 col-sm-4">
<div class="round"></div>
</div>
<div class="col-lg-8 col-lg-pull-4 col-md-8 col-md-pull-4 col-sm-8 col-sm-pull-4 intro-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
</div>
<div id="row2" class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="round"></div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 intro-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
</div>
</div>
My CSS :
#row1 {
opacity:0.3;
background-color: red;
}
#row2 {
opacity:0.3;
background-color: yellow;
}
.intro-text {
text-align:center;
}
.round {
background:#bfd70e;
border-radius:50%;
width:160px;
height:160px;
border:2px solid #679403;
margin:0 auto;
}
@media(min-width:767px) {
.intro-text {
margin-top:60px;
}
#row2 {
margin-top:-15px;
}
}
Я хочу сохранить ту же структуру, что и первая скрипта JS, но получить некоторое пространство, сделав строку 2 поверх первой. Поэтому я попробовал margin-top, но он сломал всю структуру, я не знаю почему.
Это скрипт JS без:
#row2 {
margin-top:-15px;
}
Это JS скрипка с
#row2 {
margin-top:-15px;
}
Как это исправить?
Это потому, что элементы расположены статически, поэтому сталкиваются с элементами над ним.
Если вы укажете свою вторую position:absolute
строки position:absolute
она должна остановить ее столкновение с элементами, поскольку позиция устанавливается независимо от того, что делают другие элементы. https://jsfiddle.net/584wcaa5/2/
Измените свой:
margin-top: -15px;
чтобы:
margin-top: 15px;
В противном случае вы потянете его.