Question

我们正在制作Google网站，我们将在Bootstrap上填写一份表格。

我们必须放置表单的宽度为500px;

代码没问题，但<div class="form-inline">只适用于特定尺寸的屏幕，我们需要指定尺寸，我们应该在哪里更改？

谢谢。

            <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>

Answer 1

实现结果的另一种方法是强制che class＆＃34; form-inline＆＃34;也适用于分辨率＆lt; 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;
  }
}

顺便说一句，对于小宽度窗口，可能会出现这样的可能性，即并非所有内联组件都可以在同一行中呈现，而最后一些组件将出现在第二行（如果没有足够的空间）。

Answer 2

在bootstrap 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>

Answer 3

对我有用的是@Rancid解决方案，但由

display: inline-block

替换

display: inline-table

并且它工作得很好，所有元素都在一行中。

如何使bootstrap class =“form-inline”在分辨率上工作＆lt; 768px

3 个答案: