CSS Bootstrap 表单内联不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21017542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap form inline not working
提问by MChan
I am trying to add this simple search form while applying form inline class so that controls appear next to each other, but I get the controls displayed above each other and the search bottom in white and looking strange, so can someone please tell me what I am missing here?
我正在尝试在应用表单内联类时添加这个简单的搜索表单，以便控件彼此相邻显示，但是我将控件显示在彼此上方并且搜索底部显示为白色并且看起来很奇怪，所以有人可以告诉我我是什么在这里失踪了吗？
<div class="container">
<div class="row">
<div class="col-md-8">
<form class="form-inline" action="#" method="post">
Search<input type="text" id="search" name="search" class="input-small" placeholder="Search...">
<select id="searchon" name="searchon">
<option value="0">First Name</option>
<option value="1">Last Name</option>
</select>
<button type="submit" class="btn">Search</button>
</form>
</div>
</div>
</div>
采纳答案by NoobEditor
From Bootstrap reference,for inline forms:
This only applies to forms within viewports that are at least 768px wide.
这仅适用于宽度至少为 768 像素的视口内的表单。
and as far as your layout is concerned,
就您的布局而言，
<div class="container">
<div class="row">
<div class="col-md-8">
<form class="form-inline" action="#" method="post">
Search<input type="text" id="search" name="search" class="input-small" placeholder="Search...">
<select id="searchon" name="searchon">
<option value="0">First Name</option>
<option value="1">Last Name</option>
</select>
<button type="submit" class="btn">Search</button>
</form>
</div>
</div>
</div>
its perfectly fine..inline :
它非常好..内联：
回答by learnerplates
I had a similar issue with a code snippet from bootstrap. I found that the 2 classes 'control-group' and 'controls' broke the inline. removing the 2 classes fixed it for me.
我对 bootstrap 的代码片段有类似的问题。我发现 'control-group' 和 'controls' 这两个类破坏了内联。删除 2 个类为我修复了它。
<div class="control-group">
<label class="control-label" for="Name">Name</label>
<div class="controls">
<input type="text" id="Name" placeholder="Name">
</div>
</div>
to:
到：
<label class="control-label" for="Name">Name</label>
<input type="text" id="Name" placeholder="Name">
回答by Geoff White
Yes! removing the second class from the div worked for me.
是的！从 div 中删除第二个类对我有用。
<form class="form-inline name=" search">
<fieldset>
<div class="form-group">
<input name="rego" id="search_box" style="text-transform:uppercase" maxlength="6" type="text" class="form-control input-md" placeholder="PLATE NO">
<input class="btn btn-lg btn-primary" type="submit" value=" Programe Tag " />
</div>
</fieldset>
to
到
<form class="form-inline name=" search">
<fieldset>
<input name="rego" id="search_box" style="text-transform:uppercase" maxlength="6" type="text" class="form-control input-md" placeholder="PLATE NO">
<input class="btn btn-lg btn-primary" type="submit" value=" Programe Tag " />
</fieldset>
