[英]Bootstrap is baffling me : <nav> , .nav, .navbar-nav, .navbar
[英]bootstrap navbar search under navbar-nav?
如何將引導導航欄放在navbar-nav下?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 brand brand-name navbar-left" href="#">Brand Name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="home.html">Home</a><span class="current-bar-box"><span class="current-bar"></span></span></li>
<li><a href="news.html">What's On</a></li>
<li><a href="article-project.php">Publications</a></li>
<li><a href="article.html">Multimedia</a></li>
<li><a href="article.html">Contact</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
結果:
我追求的是:
可能嗎?
編輯:
在移動設備上,例如:
看起來您的搜索欄不會出現在文檔流中(因為它被覆蓋在導航欄和滑塊圖像的頂部),因此這是絕對定位提供最簡單解決方案的情況之一。
由於您只希望搜索字段顯示在更廣泛的設備上的該位置,因此請確保圍繞最終使用的任何樣式使用媒體查詢(我使用了Bootstrap的數位板斷點):
@media (min-width: 768px){
.navbar{
position: relative; /* Important if the navbar isn't the default 100% of the screen width */
}
.navbar-form.navbar-left{
position: absolute;
right: 0;
top: 100%;
}
}
使用其他默認Bootstrap CSS的外觀:
這是Bootply演示。 您可能需要根據設計需要調整top
和right
值。 幸運的是,Bootstrap的標准CSS用於更窄的斷點,幾乎完全符合您希望顯示搜索字段的方式,因此您無需專門為其編寫任何CSS。
(您必須編寫更多的CSS才能使用較窄寬度的嵌入式放大鏡隱藏/替換提交按鈕,但這並不算太難。Bootstrap提供了一些方便的類,用於有條件地顯示不同屏幕寬度的元素,如果需要。)
希望這可以幫助! 如果您有任何疑問,請告訴我。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.