Inline Checkbox and Input Element in Bootstrap-CodePudding

I'm trying to inline input and checkbox using Bootstrap

My code is:

<!-- 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  style=" width:250px; height:250px;">
  <div >
    <input  id="mawbNoCheck" type="checkbox" style="height: 34px;width:20px;">
    <label style="width:100%;"> <input  maxlength="50" id="txtMawb" placeholder="MAWB No" type="text" disabled /></label>
  </div>
  <div >
    <input  id="collectionDatecheck" type="checkbox" style="height: 34px;width:20px;">
    <label style="width:100%;"><input  id="txtCollectionDate" maxlength="50" placeholder="Toplama Tarihi" type="text" disabled /></label>

  </div>
  <div >
    <input  id="manifestDateCheck" type="checkbox" style="height: 34px;width:20px;">
    <label style="width:100%;"><input  id="txtManifestDate" maxlength="50" placeholder="Manifesto Tarihi" type="text" disabled /></label>
  </div>
  <div >
    <a >Güncelle</a>
  </div>
</form>

But it looks like this:

CodePudding user response：

Just set display:inline-flex !important;

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

</style>

CodePudding user response：

.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  style=" width:250px; height:250px;">
            <div >
                <input  id="mawbNoCheck" type="checkbox" style="height: 34px;width:20px;">
                <label style="width:100%;"> <input  maxlength="50" id="txtMawb" placeholder="MAWB No" type="text" disabled /></label>
            </div>
            <div >
                <input  id="collectionDatecheck" type="checkbox" style="height: 34px;width:20px;">
                <label style="width:100%;"><input  id="txtCollectionDate" maxlength="50" placeholder="Toplama Tarihi" type="text" disabled /></label>

            </div>
            <div >