我们正在制作一个 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>
最佳答案
另一种实现结果的方法是强制 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;
}
}
顺便说一下,如果窗口宽度较小,可能会出现并非所有内联组件都可以在同一行中呈现的情况,并且一些最后的组件将出现在第二行(如果没有足够的空间)。
关于html - 如何使 Bootstrap 类 ="form-inline"在分辨率 < 768px 上工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21651215/