javascript - 内联元素组 - Bootstrap 4

Question

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

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

可能我做的是错的。请让我知道通过 Bootstrap 处理它的更好方法。

提前致谢。

代码-

<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>

Answer 1

尝试使用d-flex 和flex-column 类。在一些 Bootstrap 4 playgrounds 上试过，在你需要它工作的时候工作。您可以阅读更多相关信息 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>