Bootstrap - Позиционирование блоков

Question

Подскажите как выполнить позиционирование по схеме как на скриншоте . пробовал при помощи class="d-flex justify-content-around" и class="d-flex justify-content-between" - не понимаю почему не сработало.

foo.onclick = function(){
    this.classList.toggle('rotate')
}

body {
    background: rgb(235, 235, 235);
}

img {
    transition: transform 2s ease;
}

.logo {
    margin-top: 5px;
}

#foo {
    width: 64px;
    height: 64px;
    border: 2px solid red;
}

.rotate {
    transform: rotate(360deg);
}

.navbar {
    border-radius: 10px;
    margin-top: 20px;
    box-shadow: 0px 2px rgb(189, 189, 189);
}
.text1 {
    margin-left: 70px;
    margin-top: -50px;
}
.text2 {
    margin-left: 70px;
    margin-top: -25px;
}
.buton-header {
    
}
.search {
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">
    <title>task-13</title>
</head>
<body >
    <div class="container">
        <nav class="navbar navbar-expand-lg bg-body-tertiary justify-content-around">
            <div class="row">
                <div class="col-md-3 d-inline-flex align-items-center">
                    <div class="logo">
                        <img src="img/logo.png" alt="logo" id="foo" class="rounded-circle">
                            <div class="text1 d-flex">
                                <p class="fw-bold ">test1</p>
                            </div>
                            <div class="text2 d-flex">
                                <p class="fw-bold text-danger">test2</p>
                            </div>
                    </div>
                </div>
                <div class="search col-md-6 d-inline-flex align-items-center">
                    <form role="search">
                        <input class="form-control me-2" type="search" placeholder="Поиск" aria-label="Поиск">
                    </form>
                </div>
                <div class="buton-header col-md-3 d-inline-flex align-items-center">
                    <div class="collapse navbar-collapse">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                            <li class="nav-item">
                                <button type="button" class="btn btn-outline-secondary btn-sm"><a class="nav-link" href="#">Главная</a></button>
                            </li>
                            <li class="nav-item">
                                <button type="button" class="btn btn-outline-secondary btn-sm"><a class="nav-link" href="#">Статьи</a></button>
                            </li>
                            <li class="nav-item">
                                <button type="button" class="btn btn-outline-secondary btn-sm"><a class="nav-link" href="#">Контакты</a></button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </div>
    <script src="js/index.js"></script>
</body>
</html>

БЛОГ НА HUSL

Bootstrap - Позиционирование блоков

Ответы (0 шт):