Question

Codepen here

第一种形式有两对标签＆amp;元素排列在同一行。

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

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

问题即可。有没有办法让 FORM2 看起来与 FORM1 完全一样，标记略有不同？

Answer 1

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

＆＃13;

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

＆＃13;

参考：

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

Bootstrap 4 form-group，每行有两对标签和输入

1 个答案: