[英]Place part of the navbar brand outside the bar
我真的不知道如何為此起個好標題,但我想要的基本上是這樣的:
但我的結果是這樣的
這是我的導航欄代碼。 我正在使用 Bootstrap Vue 庫
.logo-home{
width:50px;
height:50px;
}
.navbar-fh{
background-color:#BAE5FF !important;
}
<div>
<b-navbar toggleable="lg" type="light" variant="secondary" class="navbar-fh">
<b-navbar-brand to="/"> <img src="../../../public/LogoV1.png" alt="" class="logo-home">
</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-item to="/">Home</b-nav-item>
<b-nav-item to="/two">Page Two</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
有什么辦法可以讓它看起來像第一張圖片?
將徽標的位置更改為absolute
位置,並根據需要使用top
/ left
屬性對其進行定位:
.logo-home{
width:50px;
height:50px;
position: absolute;
top: 20px;
}
並且不要忘記向下移動移動模式的菜單項。 使用以下樣式將類(例如menu-items
)添加到您的b-navbar-nav
(如<b-navbar-nav class="ml-auto menu-items">
):
@media (max-width: 991px) {
.menu-items {
margin-top: 40px;
}
}
new Vue({ el: "#app" });
.logo-home{ width:60px; height:60px; background-color: blue; position: absolute; top: 20px; } @media (max-width: 991px) { .menu-items{ margin-top: 40px; } }
<link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet"/> <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js"></script> <div id="app"> <b-navbar toggleable="lg" type="light" variant="secondary" class="navbar-fh"> <b-navbar-brand to="/"> <div class="logo-home"></div> </b-navbar-brand> <b-navbar-toggle target="nav-collapse"></b-navbar-toggle> <b-collapse id="nav-collapse" is-nav> <!-- Right aligned nav items --> <b-navbar-nav class="ml-auto menu-items"> <b-nav-item to="/">Home</b-nav-item> <b-nav-item to="/two">Page Two</b-nav-item> </b-navbar-nav> </b-collapse> </b-navbar> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.