Bootstrap 中的内联复选框和输入元素

Question

我正在尝试使用 Bootstrap 内联输入和复选框

我的代码是：

 <.-- Bootstrap-3.4:1 --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <;-- Body --> <form class="form " style=" width:250px; height:250px;"> <div class="form-group"> <input class="form-control " id="mawbNoCheck" type="checkbox" style="height: 34px;width:20px;"> <label style="width:100%;"> <input class="form-control" maxlength="50" id="txtMawb" placeholder="MAWB No" type="text" disabled /></label> </div> <div class="form-group"> <input class="form-control" id="collectionDatecheck" type="checkbox" style="height: 34px;width:20px;"> <label style="width:100%;"><input class="form-control date-picker" id="txtCollectionDate" maxlength="50" placeholder="Toplama Tarihi" type="text" disabled /></label> </div> <div class="form-group"> <input class="form-control " id="manifestDateCheck" type="checkbox" style="height: 34px;width:20px;"> <label style="width:100%;"><input class="form-control date-picker" id="txtManifestDate" maxlength="50" placeholder="Manifesto Tarihi" type="text" disabled /></label> </div> <div class="form-group "> <a class="btn btn-success">Güncelle</a> </div> </form>

但它看起来像这样：

Answer 1

只需设置 display:inline-flex;important;

<style>
    form div.form-group{
        display:inline-flex !important;
    }

</style>

Answer 2

 .form-group { position: relative; } label { position: absolute; top: 0; left: 35px; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <form class="form " style=" width:250px; height:250px;"> <div class="form-group"> <input class="form-control " id="mawbNoCheck" type="checkbox" style="height: 34px;width:20px;"> <label style="width:100%;"> <input class="form-control" maxlength="50" id="txtMawb" placeholder="MAWB No" type="text" disabled /></label> </div> <div class="form-group"> <input class="form-control" id="collectionDatecheck" type="checkbox" style="height: 34px;width:20px;"> <label style="width:100%;"><input class="form-control date-picker" id="txtCollectionDate" maxlength="50" placeholder="Toplama Tarihi" type="text" disabled /></label> </div> <div class="form-group">