使用 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>
我怎样才能让它既可点击又好看?
最佳答案
要解决此问题,您必须首先将整个内容放入 .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>
关于html - 对齐 Bootstrap 4 自定义表单(复选框),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48784841/