时间戳

首页 > 解决方案 > How do checkbox and href in the same line? Bootstrap 4

bootstrap-4 - How do checkbox and href in the same line? Bootstrap 4

问题描述

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

How can I do it in the same line?

enter link description here

标签： bootstrap-4

解决方案

您可以将表单组设置为弹性容器，或将项目设置为内联元素。

您还可以使用Bootstrapform-inline提供的类，您需要为所有输入元素和标签创建一个容器（最好使用标签）并将该类添加到其中。form

引用引导程序：

使用.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>

推荐阅读