对齐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标记）内嵌。

但它在自定义复选框上显示错误（复选框位于错误的位置）：

以上代码为：

<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添加到第一列就可以了！

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

以下是工作代码段（单击下面的“运行代码段”按钮并展开到整页）：

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