Как добавить контейнер для lo go и горизонтальный разделитель для моей верхней навигационной панели в bootstrap? - PullRequest
Новая
       1

Как добавить контейнер для lo go и горизонтальный разделитель для моей верхней навигационной панели в bootstrap?

0 голосов
/ 05 февраля 2020

Я пытаюсь создать верхнюю навигационную панель, у которой есть lo go с цветом # 1 в качестве фона на левой стороне. Затем он разделяется серым горизонтальным разделителем, а затем у вас есть цвет # 2 с именем приложения рядом с разделителем. Я пытался выполнить sh, но мне удалось получить только go и один верхний цвет фона навигации. Мне не удалось найти способ разделить навигационную панель вверх.

HTML: 

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">

</head>




<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img alt="My Logo" src="my-logo-png-transparent.png">
                </a>
            </div>
        </div>
    </nav>



</body>


<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"></script>
<script src="dashboard_static/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>

<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>





</html>

CSS: 

nav {
    background: #282829;
    border-bottom: 2px solid #999999;;
}

img {
    height: 27.5px;
    width: 23.6px;
}

1 Ответ

1 голос
/ 05 февраля 2020

Вы имеете в виду что-то вроде этого:

index. html

 <nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header nav-logo">
            <a class="navbar-brand" href="#">
                <img alt="My Logo" src="https://via.placeholder.com/30/">
            </a>
            <span>NAME</span>

        </div>
    </div>
</nav>

style. css

.navbar {
background: blue;
border-bottom: 2px solid #999999;
padding: 0px;
}
.container-fluid{
padding: 0px;
}
.navbar-brand {
background: red;
border-right: 2px solid grey;
padding: 20px 30px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...