html - 如何仅使用 css 为引导表单进行输入和标签内联

Question

我已经尝试了这里的所有建议，甚至使用了这个链接Bootstrap Horizo​​ntal-form。但似乎没有任何效果。我想尝试只更改 css，但在这一点上，无论如何效果都很好。我只希望标签与输入在同一行。所以基本上所有的输入和标签都排成一行。同时还保持引导形式控制

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="" class="row py-2  rowRecordBorder" data-toggle="tooltip" data-original-title="">
  <div class="app-col col-12 col-md-2 bottom-align ">
    <label class="active">Storage Phone #</label>
    <input type="tel" id="t887" name="t887" onchange="buildTejPost('t887', 1);" value="100 100 1000" class="form-control" onfocus="$('#t887').inputmask({'mask': '[phone]'});" onblur="phoneNumberCheck(this);" style="border-color: green;">
  </div>
  <div class="app-col col-12 col-md-2 bottom-align ">
    <label class="active">Storage Fax #</label>
    <input type="tel" id="t888" name="t888" onchange="buildTejPost('t888', 1);" value="000 000 0000" class=" form-control" onfocus="$('#t888').inputmask({'mask': '[phone]'});" onblur="phoneNumberCheck(this);">
  </div>
  <div class="app-col col-12 col-md-2 bottom-align ">
    <label class="active">Storage Pickup Time Open</label>
    <input type="text" id="t889" name="t889" onchange="buildTejPost('t889', 1);" value="9:00AM" class=" form-control" maxlength="128">
  </div>
  <div class="app-col col-12 col-md-2 bottom-align ">
    <label class="active">Storage Pickup Time Close</label>
    <input type="text" id="t890" name="t890" onchange="buildTejPost('t890', 1);" value="3:00PM" class=" form-control" maxlength="128">
  </div>
</div>

标签： htmlcssbootstrap-4

Answer 1

将一系列标签和表单控件放在单个水平行上的最快方法是使用.form-inline：https ://getbootstrap.com/docs/4.5/components/forms/#inline-forms

<div class="form-inline">
    <label />
    <input />
    <label />
    <input />
    <label />
    <input />
    <label />
    <input />
</div>

演示： https ://jsfiddle.net/davidliang2008/edy16zx5/12/

或者您可以使用 Grid 系统来构建列，每个列都包含一个标签和一个输入，就像您的设置方式一样。为了将标签和输入放在一行中，在每一列中，技巧是让列也显示为弹性框：

<div class="row">
    <div class="col-12 col-md-2 d-flex flex-row flex-nowrap align-items-center">
        <label />
        <input />
    </div>
    ...
</div>

您可以在此处参考 Flex 实用程序：https ://getbootstrap.com/docs/4.5/utilities/flex/

• d-flex: 显示为 flex，启用 flexbox 行为
• flex-row：将其方向设置为行
• flex-nowrap: 溢出时完全不换行
• align-items-center: 为弹性项目设置中心对齐

演示： https ://jsfiddle.net/davidliang2008/edy16zx5/16/

在这两种情况下，作为开发人员，您确实需要考虑如何放置这些输入元素，尤其是在空间有限的情况下！您不能只期望 Bootstrap 会自动为您处理。