【发布时间】：2016-06-19 13:32:49
【问题描述】：
您好，我使用 bootstrap 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，输入搜索和其他按钮也无法对齐如何做到这一点？以及即使我最小化移动设备，如何使其响应，因为当我最小化按钮折叠时突然无法折叠？
或者你可以在这里查看结果 http://codepen.io/vicario/pen/graqPm
谢谢
【问题讨论】：
-
你到底是什么意思：“我想从搜索和 3 按钮中输入，例如 2 下拉菜单和搜索按钮”..请更清楚地说明您的要求
-
我的意思是输入类型搜索有 2 个按钮下拉和按钮提交先生，它将显示 inline-block.my bad sir
-
如果你清楚地说明你的问题，你会得到更好的帮助。请记住，这里的用户不知道您的代码。
-
好吧，我编辑我的描述
-
getbootstrap.com/components/#btn-dropdowns 试试这个也许.. 对于响应式设计我建议你阅读入门部分和以下部分：getbootstrap.com/css/#responsive-utilities 从长远来看它将帮助你设计你的标记，因为默认情况下bootstrap 本质上是响应式的..
标签： html css twitter-bootstrap