复选框和href在同一行中如何显示？引导程序4

Question

<div class="form-group">
    <div class="text-left">
        <label class="checkbox-inline">
            <input type="checkbox">Zapamiętaj mnie.
        </label>
    </div>
    <div class="text-right">
        <a href="#">Przypomnij hasło</a>
    </div>
</div>

如何在同一行中完成？

Answer 1

您可以将form-group设置为flex-container，或将项目设置为inline元素。

您还可以使用Bootstrap提供的form-inline类，您需要为所有输入元素和标签创建一个容器（最好使用form标签），然后添加它的类。

引用Bootstrap：

  

使用.form-inline类显示一系列标签，形式   控件和单个水平行上的按钮。内的表单控件   内联表单与其默认状态略有不同。

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

<!-- Making the form-group a flex-container -->
<div class="form-group d-flex">
  <div class="text-left">
    <label class="checkbox-inline">
       <input type="checkbox">Zapamiętaj mnie.
    </label>
  </div>
  <div class="text-right">
    <a href="#">Przypomnij hasło</a>
  </div>
</div>

<!-- Adding form-inline to a form container -->
<form class="form-inline">
  <div class="form-group">
    <div class="text-left">
      <label class="checkbox-inline">
       <input type="checkbox">Zapamiętaj mnie.
    </label>
    </div>
    <div class="text-right">
      <a href="#">Przypomnij hasło</a>
    </div>
  </div>
</form>

Answer 2

尝试一下

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

    <div class="d-flex">
        <div class="float-left">
            <label class="checkbox-inline">
                <input type="checkbox">Zapamiętaj mnie.
            </label>
        </div>
        <div class="float-right">
            <a href="#">Przypomnij hasło</a>
        </div>
    </div>
 

Answer 3

添加行和列类

<div class="form-group row">
    <div class="col text-left">
        <label class="checkbox-inline">
            <input type="checkbox">Zapamiętaj mnie.
        </label>
    </div>
    <div class="col text-right">
        <a href="#">Przypomnij hasło</a>
    </div>
</div>