如何在引导程序中为我的顶部导航栏添加徽标容器和水平分隔符？

Question

I am trying to create a top nav bar that has a logo with color #1 as the background on the left side.我正在尝试创建一个顶部导航栏，它的左侧有一个颜色为 #1 的徽标作为背景。 Then, it is separated by a grey horizontal divider and then you have color #2 with the application name next to the divider.然后，它被一个灰色的水平分隔线分隔，然后你有颜色#2，分隔线旁边有应用程序名称。 I tried to accomplish this but I only was able to get the logo and a single top nav background color.我试图做到这一点，但我只能获得徽标和单一的顶部导航背景颜色。 I was not able to find a way to divide the nav bar up.我无法找到划分导航栏的方法。

HTML: 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: CSS：

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

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

Answer 1

You mean something like this:你的意思是这样的：

index.html索引.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;
}

如何在引导程序中为我的顶部导航栏添加徽标容器和水平分隔符？

问题描述

1 个解决方案

解决方案1
1 2020-02-05 15:23:02

如何在引导程序中为我的顶部导航栏添加徽标容器和水平分隔符？

问题描述

1 个解决方案

解决方案1 1 2020-02-05 15:23:02

解决方案1
1 2020-02-05 15:23:02