如何在表格左側和表格右側有一個復選框 label

Question

我目前正在bootstrap 4中構建一個表單，但是，我無法將 label 移到左側，將復選框移到右側。

使用bootstrap 4.3.1 ：

 #checkAll { float: right;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <div class="row no-gutters"> <div class="form-group form-check-inline"> <label for="checkAll" class="form-check-label generalFrontLabel">Check all:</label> <input type="checkbox" id="checkAll" class="pull-right generalCheckBox"> </div> </div>

我曾嘗試在 HTML 上使用pull-right class 但效果不佳，我設法通過為復選框添加margin-left使其工作，但它在不同的計算機上不能很好地對齊。

我試圖在沒有引導https://jsfiddle.net/wfkey98r/的情況下實現的示例

Answer 1

嘗試做這樣的事情。

 <div class="container"> <h2>Form control: checkbox</h2> <p>The form below contains three checkboxes. The last option is disabled:</p> <form> <div class="checkbox"> <label style="margin-right: 10px;">Option 1:</label><input type="checkbox" value=""> </div> <div class="checkbox"> <label style="margin-right: 10px;">Option 2:</label><input type="checkbox" value=""> </div> </form> </div>