[英]Bootstrap Navbar with Logo
所以我一直用一個標志引導頭“ 品牌 ”之前,但我似乎整個導航欄不會調整,請參閱下面截圖
-
如您所見,整個導航欄不會調整為新“ Brand ”的高度。 這是我的導航欄中的代碼段
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/samplelogo.png" alt="CansoX" class="logo" /> Conquer and Explore </a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
任何人都知道這個問題,請給我一些提示:)
您是否嘗試增加height屬性? 像這樣:
.navbar-brand{
height: 300px;
}
我認為您需要添加class="clearfix"
來包裝徽標和下拉列表。
發生的事情是您的徽標向左浮動。 (最有可能的)---因此,當事物向左浮動時,除非容器也浮動,否則容器將不再了解這個瘋狂的新定位世界。 所以它不知道要多大。 快速解決方案可能會overflow: hidden
或邊框有時也會起作用。 但這可能會帶來意想不到的后果。 我最好想到的是使用一個微清晰的修復程序-我確定它是內置在某個地方的廢話中的。 因此,您可以在折疊的任何框中添加html中的類,或者,如果您使用的是LESS或SASS,則可以在SCSS中擴展該類,或使用其他任何方法來保持HTML的清潔。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.