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

Question

使用 Bootstrap 4 和 bootswatch，我想放置四个 Django 表单文件， since （ col-sm-2 /textinput）， until （ col-sm-2 /textinput）， currently_employed （ col-sm-7 /custom 复选框) 并在行中形成关闭按钮（ 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>