[英]Bootstrap CSS - navbar list wraps starting on a new line. How to make <ul> wrap starting on the current line?
[英]Wrap a list to new line in Bootstrap 3
在我的Bootstrap導航欄中,我在標題中有一個徽標,然后是一個內聯列表。 在大屏幕上,徽標和列表位於同一行。 在較小的屏幕上,我希望徽標位於第一行的中心,而列表位於第二行的中心。 但是,列表會一直保持垂直堆積而不是內聯。 當屏幕縮小時,如何防止內聯列表垂直顯示?
這是我當前導航欄的jsfiddle: https ://jsfiddle.net/DTcHh/6936/
隨着屏幕縮小,我需要右側的鏈接越來越接近徽標。 然后,當沒有更多空間時,我需要那些鏈接以徽標下方的新行為中心,該行應以第一行為中心。
在小屏幕上需要的效果: https : //drive.google.com/file/d/0B08LN9pHRwLuSkRvV3YwYVk5aWs/view?usp=sharing
HTML:
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header navbar-logo">
<a href="#"><img src="http://placehold.it/140x75" class="img-responsive navlogo" alt="logo here"></a>
</div>
<div class="navbar-links">
<ul class="list-inline nav navbar-nav navbar-right navbar-list">
<li><a href="#" style="color: black; font-weight: bold;">FAQ</a></li>
<li><a href="#" style="color: black; font-weight: bold;">Contact</a></li>
<li><a href="#" style="color: black; font-weight: bold">Policies</a></li>
<li><a href="#" style="background-color: #9e1d2a; color: white">For Users</a></li>
<li style="padding-top: 0px; padding-left: 15px"><a data-toggle="collapse" href="#nav-search-collapse"><i class="glyphicon glyphicon-search"></i></a></li>
</ul>
</div>
</div>
<div class="collapse" id="nav-search-collapse">
<ul class="list-inline navbar-list-form">
<li><form class="navbar-form" role="form" method="get" action="#">
<div class="input-group">
<input type="Search" placeholder="Search Data" class="form-control" name="q">
<div class="input-group-btn">
<button class="btn btn-primary">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form></li>
<li><form class="navbar-form" role="form" method="get" action="#">
<div class="input-group">
<span class="input-group-addon">wwww.</span>
<input type="Search" class="form-control" name="w_searched">
<div class="input-group-btn">
<button class="btn btn-primary">
<span>Search</span>
</button>
</div>
</div>
</form></li>
</ul>
</div>
</div>
</body>
CSS:
.navbar-list {
padding-top: 5px;
}
.navbar-list li{
font-size: 16px;
}
#nav-search-collapse {
width:100%;
margin: 0 auto;
text-align:center;
}
.navbar-list-form {
display:inline-block;
padding: 0;
}
@media (min-width: 0px) and (max-width: 1000px) {
.navbar-header{
float: left;
width: 100%;
}
.navbar-links {
float: left;
width: 100%;
}
}
將其添加到CSS中將為您提供所需的內容(您需要定義最小寬度向上耕作,所有鏈接均出現在同一換行符上,這取決於您的決定)
@media (max-width: 1000px) and (min-width: 0px) {
.navbar-links {
text-align: center;
}
.nav>li {
display: inline;
}
.nav>li>a {
display: inline;
}
}
https://jsfiddle.net/DTcHh/6940/
我添加了以下代碼:
.navbar-logo, .navbar-links {
display: inline;
width: initial !important;
}
如果您對修改有任何疑問,請告訴我。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.