นี่คือแนวทางที่ทำให้พฤติกรรมการยุบเริ่มต้นไม่เปลี่ยนแปลงในขณะที่อนุญาตให้ส่วนการนำทางใหม่ยังคงปรากฏอยู่เสมอ มันเพิ่มขึ้นของnavbar
;navbar-header-menu
เป็นคลาส CSS ที่ฉันสร้างขึ้นและไม่ได้เป็นส่วนหนึ่งของ Bootstrap ที่เหมาะสม
วางสิ่งนี้ในnavbar-header
องค์ประกอบหลังnavbar-brand
:
<div class="navbar-header-menu">
<ul class="nav navbar-nav">
<li class="active"><a href="#">I'm always visible</a></li>
</ul>
<form class="navbar-form" 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>
เพิ่ม CSS นี้:
.navbar-header-menu {
float: left;
}
.navbar-header-menu > .navbar-nav {
float: left;
margin: 0;
}
.navbar-header-menu > .navbar-nav > li {
float: left;
}
.navbar-header-menu > .navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-header-menu > .navbar-nav .open .dropdown-menu {
position: absolute;
float: left;
width: auto;
margin-top: 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.navbar-header-menu > .navbar-form {
float: left;
width: auto;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-header-menu > .navbar-form > .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-header-menu > .navbar-left {
float: left;
}
.navbar-header-menu > .navbar-right {
float: right !important;
}
.navbar-header-menu > *.navbar-right:last-child {
margin-right: -15px !important;
}
ตรวจสอบซอ: http://jsfiddle.net/L2txunqo/
ข้อแม้: navbar-right
สามารถใช้เพื่อจัดเรียงองค์ประกอบที่มองเห็นได้ แต่ไม่รับประกันว่าจะดึงองค์ประกอบไปยังส่วนขวาสุดของหน้าจอ ซอแสดงพฤติกรรมนั้นด้วยnavbar-form
.