Как в блочной верстке boostrap сделать, чтобы блок не двигался?

<div class="row">
        <div class="col-sm-4">
            <div class="avatar"></div>
        </div>
        <div class="col-sm-8">
            <div class="wall"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <div class="frends"></div>
        </div>
        <div class="col-sm-8"></div>
        <div class="col-sm-4"></div>
    </div>
</div>

и сss
.avatar {
    background-color: #cacaca;
    height: 240px;
}
.wall {
    background-color: #a9a9a9;
    height: 240px;
}
.frends {
    background-color: #cacaca;
    height: 240px;
    margin-top: 25px;
}


При увеличении высоты блока wall блок frends сдвигается вниз, как мне оставить четко под блоком avatar?(перефразирую, мне нужно чтобы при увеличении высоты блока wall, блок frends был под блоком avatar.)
  • Вопрос задан
  • 190 просмотров
Пригласить эксперта
Ответы на вопрос 3
1. не стоит так часто пользовать row без надобности, вам хватило бы 1 а вот push pull через него прыгать не умеют.
2. По сути вопроса в некоторых случаях помогает банальный clearfix
в вашем случае вариантов несколько. Мжно банально заменить ваши классы row на col-xs-12 и сверху кинуть на них общий row в таком сучае между ними будет разделитель.
Если у вас там адаптив и количество колонок меняется то тоже способ есть. но не было в тз
<div class="row">
<div class="col-sm-12">
        <div class="col-sm-4">
            <div class="avatar"></div>
        </div>
        <div class="col-sm-8">
            <div class="wall"></div>
        </div>
    </div>
    <div class="col-sm-12">
        <div class="col-sm-4">
            <div class="frends"></div>
        </div>
        <div class="col-sm-8"></div>
        <div class="col-sm-4"></div>
    </div>
</div>
</div>
Ответ написан
Комментировать
@almassar
web программист
не правильная разметка, не хватает закрывающего тэга
Ответ написан
Комментировать
@Ooos
Front-End
Эм, трудно понять желаемое.
используй https://fiddle.jshell.net/ для примеров
А из выше сказанного предполагаю, что нужно объединить их в один блок тип col-md-6
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы