如何使bootstrap class ="form-inline"在分辨率<768px上工作

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"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;
  }
}

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

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>