html - 如何使 Bootstrap 类 ="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 类“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;
  }
}

顺便说一下，如果窗口宽度较小，可能会出现并非所有内联组件都可以在同一行中呈现的情况，并且一些最后的组件将出现在第二行(如果没有足够的空间)。