Задать вопрос
@takinglimits
html

Как поместить .row под другой .row в bootstrap 4?

Если вкратце, то нужно сдвинуть сам .row #2 вверх, вместе с объектами, игнорируя row #1, а не двигать объекты внутри него. Присваивать классы с bottom, margin, padding пробовал. Если задать position: absolute блок просто растягивается вправо, это не то что мне нужно.
Как это выглядит сейчас
spoiler
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
   <!-- ГРАДИЕНТНЫЙ ФОН -->
    <div class="mainbg">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12 background">
    <!-- БЕЛЫЙ ФОНОВЫЙ ЛИСТ -->
                    <div class="container">
                        <div class="row pad20">
                            <div class="col-xl-12 whitesheet botrad20 shad20">
    <!-- NAV -->
                                <div class="row pad20">
                                    <div class="col-xl-12 navbar botrad20 shad20"></div>
                                </div>
    <!-- HEADER --> 
                                <div class="row">
                                    <div class="col-xl-12 headbar"></div>
                                </div>
    <!-- SECTION -->
                                <div class="row">
                                    <div class="col-xl-12 secbar top-100"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
</body>
</html>
spoiler
/* СПЕЦИФИКАЦИИ */
.botrad20{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.pad20{
    padding: 0 20px 0 20px;
}
.shad10{
    box-shadow: 0 0 10px 0.3px rgba(0, 2, 41, 0.4);
}
.shad20{
    box-shadow: 0 0 20px 1px rgba(0, 2, 41, 0.7);
}
/* ГРАДИЕНТНЫЙ ФОН */
.background{
    min-height: 100vh;
    height: auto;
    background: linear-gradient(to bottom, #F6F493, #FFC25E);
}
/* БЕЛЫЙ ФОНОВЫЙ ЛИСТ */
.whitesheet{
    height: 904px;
    background-color: #F1F1F1;
}
/* NAV */
.navbar{
    height: 100px;
    background-color: #7cd140;
}
/* HEADER */
.headbar{
    height: 220px;
    background-color: #fcae3f;
    margin: 20px 0 0 -20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: inset 80px 0px 50px -80px rgba(0, 2, 0, 0.3), 0 0 20px 1px rgba(0, 2, 41, 0.7);
    z-index: 1;
}
/* SECTION */
.secbar{
    height: 600px;
    background-color: #43b0db;
    margin: 0 -20px 0 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    box-shadow: inset -80px 0px 50px -80px rgba(0, 2, 0, 0.3), 0 0 20px 1px rgba(0, 2, 41, 0.7);
}
5b1a39c1af537655559440.png
Как это должно выглядеть
5b1a3b1395a3a536179782.png
  • Вопрос задан
  • 662 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
@love_fishing 
class="row" id="fish">
<div class="col-xl-12 secbar top-100">
                                      
                                  </div>

#fish {top:-60px;border:2px solid red;position:relative}

https://codepen.io/shwizerland/pen/VdmBpX
так что ли?
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 1
Madeas
@Madeas
UI / UX Designer, Frontend Developer
Если не заморачиваться, то 
.secbar {
  margin: -60px 0 0 20px;
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Настроить интеграцию WhatsBox с Facebook
26 апр. 2024, в 10:43
1500 руб./за проект
УТ+CRM
26 апр. 2024, в 10:21
1200 руб./в час
Фулл стак Laravel + Vue.Js программист на доработку сайта агенства
26 апр. 2024, в 10:17
50000 руб./за проект
Ещё заказы