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

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

Answer 2

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

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

</style>

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

Inline Checkbox and Input Element in Bootstrap

html

css

twitter-bootstrap-3