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

【问题标题】：Inline Checkbox and Input Element in BootstrapBootstrap 中的内联复选框和输入元素
【发布时间】：2022-02-04 21:24:30
【问题描述】：

我正在尝试使用 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>

但它看起来像这样：

【问题讨论】：

什么引导版本？请标记正确的版本而不是twitter-bootstrap
抱歉 Bootstrap 3.4.1

标签： html css twitter-bootstrap-3

【解决方案1】：

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

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

</style>

【讨论】：

你错过了一些刚刚设置的东西display:inline-flex不要在这个示例中垂直对齐元素

【解决方案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">

【讨论】：