Html “如何悬垂”;标志“;从导航
我一直在试图找出如何使用SVG从导航栏上突出一个徽标 这是我的代码笔示例: HTML/导航栏:Html “如何悬垂”;标志“;从导航,html,css,bootstrap-4,Html,Css,Bootstrap 4,我一直在试图找出如何使用SVG从导航栏上突出一个徽标 这是我的代码笔示例: HTML/导航栏: <nav class="navbar navbar-expand-lg"> <a class="navbar-brand"> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /&
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand">
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
这个例子就是我迄今为止所做的。我正试图将徽标(黄色圆圈)悬在导航下方-半进半出,并保持导航栏的默认高度。您可以通过以下方式轻松完成:
.navbar-brand {
position: absolute;
top: 0px;
}
.navbar-collapse {
margin-left: 115px;
}
并从svg中删除所有样式
您可以轻松地使用:
.navbar-brand {
position: absolute;
top: 0px;
}
.navbar-collapse {
margin-left: 115px;
}
并从svg中删除所有样式
参见更新
更新的CSS
nav {
background-color: firebrick;
}
svg {
position: absolute;
top: 5px;
}
.navbar.navbar-expand-lg .navbar-collapse{
margin-left : 80px;
}
见更新
更新的CSS
nav {
background-color: firebrick;
}
svg {
position: absolute;
top: 5px;
}
.navbar.navbar-expand-lg .navbar-collapse{
margin-left : 80px;
}
您必须使svg
position:absolute
退出文档流,这样它就不会影响导航的高度。然后,您必须使用您的top
值,并给nav一些左填充
,这样它就不会与nav项目重叠。您必须使svg位置:绝对
从文档流中取出,这样它就不会影响nav的高度。然后,您必须使用top
值,并给导航添加一些左侧填充
,这样它就不会与导航项目重叠