twitter-bootstrap 如何使 bootstrap class="form-inline" 在分辨率 < 768px 上工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21651215/
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
How make bootstrap class="form-inline" work on resolutions < 768px
提问by Renan Otero
We are making a Google sites where we will put a form made on Bootstrap.
我们正在制作一个谷歌网站，我们将在 Bootstrap 上制作一个表单。
The width that we have to put the form is 500px;
我们要放置表单的宽度是500px；
The code its alright but the <div class="form-inline">just work on a specific size of screen, and we need to specify that size, where should we change that?
代码没问题，但<div class="form-inline">只能在特定尺寸的屏幕上工作，我们需要指定该尺寸，我们应该在哪里更改？
Thank you.
谢谢你。
<div class="form-group">
<div class="form-inline">
<div class="form-group">
<label class="sr-only" for="Inputtel">Telefone</label>
<input type="tel" class="form-control" id="Inputtel" placeholder="Telefone">
</div>
<div class="form-group">
<label class="sr-only" for="InputCPFCNPJ">CPF ou CNPJ</label>
<input type="number" class="form-control" id="InputCPFCNPJ" placeholder="CPF ou CNPJ">
</div>
</div>
</div>
采纳答案by chuebert
in bootstrap 3 you can use the grid options to do that. It is right that you want the inputs in one line? So you can solve your problem with col-xs-6. or you can use smaller input with col-xs-4. test it ;)
在引导程序 3 中，您可以使用网格选项来做到这一点。您希望在一行中输入是正确的吗？所以你可以用 col-xs-6 解决你的问题。或者您可以使用 col-xs-4 使用较小的输入。测试一下;)
<div class="form-inline">
<div class="form-group col-xs-6">
<label class="sr-only" for="Inputtel">Telefone</label>
<input type="tel" class="form-control" id="Inputtel" placeholder="Telefone">
</div>
<div class="form-group col-xs-6">
<label class="sr-only" for="InputCPFCNPJ">CPF ou CNPJ</label>
<input type="number" class="form-control" id="InputCPFCNPJ" placeholder="CPF ou CNPJ">
</div>
</div>
回答by Rancid
Another way to achieve the result is to force che class "form-inline" works also with the resolution < 768px adding a simple css in your project:
实现结果的另一种方法是强制 che 类“form-inline”也适用于分辨率 < 768px 在您的项目中添加一个简单的 css：
@media (max-width: 767px) {
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
}
@media (max-width: 767px) {
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
}
By the way, with small width windows can occur the possibility that not all your inline components can be rendered in the same row and some last components will go on the second row (if there aren't enough space).
顺便说一句，对于小宽度的窗口，可能会出现并非所有内联组件都可以在同一行中呈现的可能性，并且一些最后的组件将出现在第二行（如果没有足够的空间）。
回答by Luciano
What worked for me was @Rancid solution but replaced
对我有用的是@Rancid 解决方案，但被替换了
display: inline-block经过
display: inline-table它工作得很好，所有元素都在一行中。
