Smi*_*thy 4 html css twitter-bootstrap
我正在尝试制作一个搜索栏，其中绿色 div 位于灰色 div 的中间（请参阅http://codepen.io/anon/pen/LRBEvq?editors=1100）和复选框，选择下拉菜单，然后输入字段全部内联有两个按钮 - 所以所有内容都在同一行。我正在使用 Bootstrap 使其具有响应能力，但卡住了并且无法弄清楚..感谢您的所有帮助！
这是我的html：
.main {
background-color: grey;
width: 1202px;
height: 156px;
margin: 0 auto;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
}
button {
height: 37px;
width: 160px;
}
.choice {
background-color: lightgrey;
height: 37px;
}
.checkbox {
width: 207px;
border: 1px solid white;
}
.choice-select {
width: 173px;
}
.choice-input {
width: 390px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container">
<div class="main">
<div class="formContainer">
<div class="col-md-12">Lorem lorem lorem
<div class="pull-right">Ipsum lorem ipsum</div>
</div>
<div class="row mainContent">
<!-- mainContent -->
<div class="col-md-7">
<!-- main content -->
<div class="checkbox">
<span class="choice-details">
<label class="checkbox-inline">
<input type="checkbox" value="" checked>Lorem
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Ipsum
</label>
</span>
</div>
<div class="choice-select">
<select class="form-control">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
<div class="choice-input">
<input type="text" placeholder="Placeholder text">
</div>
</div>
<div class="col-md-5">
<button>Lorem ipsum lorem</button>
<button>Lorem lorem lorem</button>
</div>
<!-- end main content -->
</div>
<!-- end mainContent -->
</div>
</div>
</div>用于display: inline-block;让包装器 div 的行为类似于内联元素，而不会丢失其块属性：
.mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
display: inline-block;
}
如果您还希望按钮位于同一行，请<div class="col-md-12">对整个内容使用 a 。
要将菜单栏水平居中，请使用margin: 0 auto;; 要将其垂直居中，定位它，应用 atop: 50%;并将其沿负 y 方向（向上）平移回其大小的一半：
.formContainer {
margin: 0 auto;
position: relative;
top: 50%;
transform: translate(0,-50%);
}
要使输入文本字段与剩余空间一样长，只需将输入的宽度设置为其包装 div 相同：
.mainContent .choice-input input {
width: inherit;
}
.mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
display: inline-block;
}
.formContainer {
margin: 0 auto;
position: relative;
top: 50%;
transform: translate(0,-50%);
}