对齐 Bootstrap 4 个自定义表单（复选框）

Question

使用 Bootstrap 4 和 bootswatch，我想放置四个 Django 表单文件，since(col-sm-2/textinput)，until(col-sm-2/textinput), currently_employed(col-sm-7/自定义复选框) 和表单关闭按钮(col-sm-1/a 标签) in-row.

但是它在自定义复选框上呈现错误（复选框在错误的位置）：

以上代码为：

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/4.0.0-beta.3/solar/bootstrap.min.css" rel="stylesheet" integrity="sha384-Jpv9vxZao0dlyvegpeTxSgc5cczNCOpcV5ihm8RQbrMo263QmC3Sf5HIMBfr+nqx" crossorigin="anonymous">

<div class="row-fluid">
  <div class="col-sm-1 float-right">
    <!-- Empty Career: Close form button -->
    <a class="btn btn-default float-right close-career">
      <i class="fas fa-times"></i>
    </a>
  </div>
  <div class="col-sm-2 float-left">
    <div class="form-group">
      <input type="text" name="career-__prefix__-since" class="form-control" placeholder="0000.0" id="id_career-__prefix__-since" />
    </div>
  </div>
  <div class="col-sm-2 float-left">
    <div class="form-group">
      <input type="text" name="career-__prefix__-until" class="form-control" placeholder="0000.0" id="id_career-__prefix__-until" />
    </div>
  </div>
  <div class="col-sm-7">
    <div class="form-group">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" name="career-__prefix__-currently_employed" class="custom-control-input form-control float-left" id="id_career-__prefix__-currently_employed" />
        <label class="custom-control-label" for="id_career-__prefix__-currently_employed">
                Currently employed
        </label>
      </div>
    </div>
  </div>

since和until是float-left，关闭按钮是float-right。

为了看起来正确，我将 class float-left 添加到 currently_employed，它看起来不错但无法点击：

为此更改的代码是：

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/4.0.0-beta.3/solar/bootstrap.min.css" rel="stylesheet" integrity="sha384-Jpv9vxZao0dlyvegpeTxSgc5cczNCOpcV5ihm8RQbrMo263QmC3Sf5HIMBfr+nqx" crossorigin="anonymous">

<div class="row-fluid">
  <div class="col-sm-1 float-right">
    <!-- Empty Career: Close form button -->
    <a class="btn btn-default float-right close-career">
      <i class="fas fa-times"></i>
    </a>
  </div>
  <div class="col-sm-2 float-left">
    <div class="form-group">
      <input type="text" name="career-__prefix__-since" class="form-control" placeholder="0000.0" id="id_career-__prefix__-since" />
    </div>
  </div>
  <div class="col-sm-2 float-left">
    <div class="form-group">
      <input type="text" name="career-__prefix__-until" class="form-control" placeholder="0000.0" id="id_career-__prefix__-until" />
    </div>
  </div>
  <div class="col-sm-7 float-left">
    <div class="form-group">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" name="career-__prefix__-currently_employed" class="custom-control-input form-control float-left" id="id_career-__prefix__-currently_employed" />
        <label class="custom-control-label" for="id_career-__prefix__-currently_employed">
                Currently employed
        </label>
      </div>
    </div>
  </div>

我怎样才能让它既可点击又好看？

Answer 1

要解决此问题，您必须首先将整个内容放入 .container 或 .container-fluid，然后将其放入 .row 并将所有列放入该行。并确保 删除所有 float classes 例如 float-right 等

然后您只需将 class order-sm-last 添加到第一列即可！

对于小屏幕 (sm) 或更大的屏幕，order-sm-last 会将第一列（带有关闭按钮）move/re-order 到最后一列。对于最小的屏幕，第一列的位置将保持不变。

这是工作代码片段（单击下面的 "run code snippet" 按钮并展开到整页）：

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

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<!-- Empty Career: Visible Fields -->
<div class="container-fluid mt-3">
    <div class="row">
        <div class="col-sm-1 text-right order-sm-last">
            <!-- Empty Career: Close form button -->
            <a class="btn btn-default close-career">
                <i class="fas fa-times"></i>
            </a>
        </div>
        <div class="col-sm-2">
            <div class="form-group">
                <input type="text" name="career-__prefix__-since" class="form-control" placeholder="0000.0" id="id_career-__prefix__-since" />
            </div>
        </div>
        <div class="col-sm-2">
            <div class="form-group">
                <input type="text" name="career-__prefix__-until" class="form-control" placeholder="0000.0" id="id_career-__prefix__-until" />
            </div>
        </div>
        <div class="col-sm-7">
            <div class="form-group">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" name="career-__prefix__-currently_employed" class="custom-control-input form-control" id="id_career-__prefix__-currently_employed" />
                    <label class="custom-control-label" for="id_career-__prefix__-currently_employed">
                        Currently employed
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

对齐 Bootstrap 4 个自定义表单（复选框）

Align Bootstrap 4 custom form(checkbox)

html

css

checkbox

bootswatch

bootstrap-4