你好我使用引導3 v3.36有一個項目,有一個導航欄固定頂部和滑塊和窗體搜索。 在滑塊區域我想從搜索和3按鈕像2下拉和搜索按鈕與顯示內聯。如何在中間輸入表格
繼承人我的代碼
<header>
<!-- NAVBAR-START -->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">people <span class="sr-only">(current)</span></a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">inspiration</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Jobs oportunity</a></li>
<li><a href="#">hirring a chief?</a></li>
<li><a href="#">login|signup</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- NAVBAR-END -->
<!-- SLIDER-START -->
<div id="slider">
<img src="http://placehold.it/350x150">
</div>
<!-- SLIDER=END -->
<!-- search-controller -->
<div class="position-relative">
<div class="search-controller">
<form role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown1
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown2
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<!-- search-controller END-->
</header>
CSS
#slider img{
width: 100%;
}
.search-controller .form-control{
width: 60%;
margin: auto;
}
.search-controller{
position: absolute;
top: auto;
bottom: 15px;
left: 0;
right: 0;
z-index: 2000;
}
.position-relative{
position: relative;
}
,但我的代碼輸入搜索和其他按鈕不能得到艾琳甚至我用display:inline-block
如何做到這一點?以及如何使它即使我儘量減少移動,因爲當我最大限度地減少我的按鈕崩潰突然不能colapse?
,或者你可以點擊這裏 http://codepen.io/vicario/pen/graqPm
感謝
究竟你的意思:「我想從搜索和類似2下拉3按鈕,就可把和搜索按鈕」。 。請更清楚地指明您的要求 –
我的意思是輸入類型的搜索與2按鈕下拉和按鈕提交先生,它會得到顯示inline-block.my壞先生 – vicario
如果你明確指出你的問題,你會得到更好的幫助。記住用戶在這裏不知道你的代碼。 –