时间戳

首页 > 解决方案 > 我的徽标显示在我的导航栏 html/css 下方

html - 我的徽标显示在我的导航栏 html/css 下方

问题描述

在这里，我的徽标显示在我的导航栏下方，¿我如何将其移动到我的导航栏并调整其大小？

错误的位置

这是我的代码

代码：

<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MyNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar right">
                    <li class=""active><a href"#">Home</a></li>
                    <li><a href="#">about</a></li>
                    <li><a href="#">discord</a></li>
        </div>
    </nav>

</body>

标签： htmlcss

解决方案

好的，我已经修复了 css 并检查了下面的实时示例。

您必须为 .navbar-brand 类提供固定的宽度和高度，然后只需将以下 css 添加到内部的 img 中，因为它将覆盖整个 .navbar-brand

.navbar-brand img {
  width: 100%;
  height: 100%;
}

现场示例：

https://codepen.io/anon/pen/rvXzEg

推荐阅读