html - 对齐 Bootstrap 4 自定义表单(复选框)

Question

使用 Bootstrap 4 和 bootswatch，我想放置四个 Django 表单文件，since(col-sm-2/textinput)，until (col-sm-2/textinput)、currently_employed(col-sm-7/custom checkbox) 和表单关闭按钮(col-sm-1/a 标签)行内。

但它在自定义复选框上呈现错误(复选框在错误的位置):

上面的代码是:

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

为了看起来正确，我将类 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 类，例如float-right 等。

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

对于小 (sm) 或更大的屏幕，order-sm-last 会将第一列(使用关闭按钮)移动/重新排序到最后.对于最小的屏幕，第一列的位置将保持不变。

这是工作代码片段(点击下面的“运行代码片段”按钮并展开到整页):

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