我使用的是Materialize Framework,我想在导航栏上放两个徽标,一个接一个。
我在尝试适应这些元素时遇到了麻烦。
这是codepen
我已经尝试过使用显示属性,但是我做错了。
body {
background-color: gray;
}
.brand-logo {
display: flex;
flex-wrap: wrap;
}
.brand-logo > #logoUnacar,#svgUnacar {
line-height: 40px;
text-align: center;
}
#logoUnacar {
order: 1;
width: 12%;
}
#svgUnacar {
order: 2;
width: 50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<div class="nav-wrapper light-blue darken-4">
<a href="#" class="brand-logo">
<img id="svgEscudo" src="https://svgshare.com/i/Bbx.svg">
<img id="svgUnacar" src="https://svgshare.com/i/BcX.svg">
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="sass.html">Inicio </a>
</li>
<li><a href="badges.html">Registrar Proyecto</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
最佳答案
我在导航栏中水平使用了两个徽标。希望这可以帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<title>yo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
<img src="download.png" alt="logo" style="width:40px;">
<img src="download.png" alt="logo" style="width:40px;">
</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link . . </a>
</li>
</ul>
</nav>
<div class="container-fluid">
<h1>hey</h1>
<p>GLHF</p>
</div>
</body>
</html>