bootstrap-4 - Bootstrap 4 表单组，每行有两对标签和输入

Question

Codepen here .

第一个表单有两对标签和元素放置在同一行。

我想做的是嵌套每对 <label>和<div>在自己的容器中:div.myFormColumnLeft和div.myFormColumnRight .

问题在于 FORM2 中的标签和元素不再位于同一行。

问题。有没有办法使 FORM2 看起来与 FORM1 完全相同，但标记略有不同？

Answer 1

在这种情况下，将 d-flex 类添加到列中就可以解决问题:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
    <b>FORM1:</b>
    <form>
        <div class="form-group row">

            <!-- Left column -->
            <label class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-4">
                <input type="email" class="form-control">
            </div>

            <!-- Right column -->
            <label class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-4">
                <input type="password" class="form-control">
            </div>

        </div>
    </form>
    <hr />

    <b>FORM2:</b>
    <form>
        <div class="form-group row">

            <!-- Left column -->
            <div class="myFormColumnLeft col-md-6 d-flex">
                <label class="col-sm-4 col-form-label">Email</label>
                <div class="col-sm-8">
                    <input type="email" class="form-control">
                </div>
            </div>

            <!-- Right column -->
            <div class="myFormColumnRight col-md-6 d-flex">
                <label class="col-sm-4 col-form-label">Password</label>
                <div class="col-sm-8">
                    <input type="password" class="form-control">
                </div>
            </div>

        </div>
    </form>
</div>

引用:

https://getbootstrap.com/docs/4.0/utilities/flex/#enable-flex-behaviors