内联的一组元素 - Bootstrap 4答案

【问题标题】：Group of elements coming up inline - Bootstrap 4内联的一组元素 - Bootstrap 4
【发布时间】：2017-12-24 05:27:45
【问题描述】：

要求标签应该在输入元素的顶部，而每个标签和输入元素的组应该彼此内联。

当标签文本有点长时，我可以使用下面的代码实现相同的效果。当标签的文本很短时，输入元素与标签内联显示。

可能我做错了。请让我知道通过引导程序处理它的更好方法。

提前致谢。

代码 -

<form class="form" id="taxCalcDetail">
<div class="form-inline">
    <div class="form-group col-lg-3 pb-3">
        <label class="small pb-1">A1</label>
        <input type="text" name="t1" class="form-control" id="t1">
    </div>
    <div class="form-group col-lg-3 pb-3">
        <label class="small pb-1">A2</label>
        <input type="text" name="t2" class="form-control" id="t2">  
    </div>
    <div class="form-group col-lg-3 pb-3">
        <label class="small pb-1">A3</label>
        <input type="text" name="t3" class="form-control" id="t3">  
    </div>
</div>

【问题讨论】：

显示你当前的输出
i.stack.imgur.com/CCclR.jpg
你可以使用“display:inline-block;”css属性到你的标签标签

标签： javascript jquery html css bootstrap-4

【解决方案1】：

尝试使用d-flex 和flex-column 类。在一些 Bootstrap 4 游乐场上尝试过，可以根据需要工作。你可以阅读更多关于它的信息here。

<form class="form" id="taxCalcDetail">
    <div class="form-inline">
        <div class="form-group col-md-4">
            <div class="d-flex flex-column">
                <label for="name" class="control-label">A1</label>
                <input type="text" class="form-control" id="lineHeight">
            </div>
        </div>
    <div class="form-group col-md-4">
        <div class="d-flex flex-column">
            <label for="name" class="control-label">A2</label>
            <input type="text" class="form-control" id="lineHeight">
        </div>
    </div>
    <div class="form-group col-md-4">
        <div class="d-flex flex-column">
            <label for="name" class="control-label">A3</label>
            <input type="text" class="form-control" id="lineHeight">
        </div>
    </div>
    </div>
    </form>

【讨论】：

【解决方案2】：

在引导程序 4 中，您可以使用 d-inline-block 类

  <form class="form" id="taxCalcDetail">
  <div class="form-inline">
     <div class="form-group col-lg-3 pb-3">
        <label class="small pb-1 d-inline-block">A1</label>
        <input type="text" name="t1" class="form-control" id="t1">
     </div>
     <div class="form-group col-lg-3 pb-3">
        <label class="small pb-1 d-inline-block">A2</label>
        <input type="text" name="t2" class="form-control" id="t2">  
     </div>
     <div class="form-group col-lg-3 pb-3">
        <label class="small pb-1 d-inline-block">A3</label>
        <input type="text" name="t3" class="form-control" id="t3">  
     </div>
 </div>

【讨论】：

提供相同的输出。我没有看到任何变化。
您尝试先清除浏览器缓存并重新加载您的 html 页面。之后让我知道它的工作与否
使用 d-inline-block 它变成了堆叠形式。它不再内联了。