Bootstrap 4.4.1 在输入附近放置按钮或字体很棒答案

【问题标题】：Bootstrap 4.4.1 place button or font awesome near inputBootstrap 4.4.1 在输入附近放置按钮或字体很棒
【发布时间】：2020-06-15 13:07:34
【问题描述】：

我需要将按钮放在输入附近。我尝试使用 input-group 和 checkbox-inline 并使用更小或更大的列。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="form-group">
                <label class="control-label col-md-4" for="MainDiagnosis">Main Diagnosis Code</label>
                        <div class="col-md-8">
                            <input class="form-control text-box single-line" disabled="disabled" id="MainDiagnosis" name="MainDiagnosis" type="text" value="">
                        <input type="button" value="click">
                        </div>
                        <span class="field-validation-valid text-danger" data-valmsg-for="MainDiagnosis" data-valmsg-replace="true"></span>
               
                </div>

<div class="form-group">
                <label class="control-label col-md-4" for="PatientAvailableFrom">Available From</label>
                <div class="col-md-8">
                    <input class="form-control text-box single-line hasDatepicker" data-val="true" data-val-date="The field Available From must be a date." data-val-required="Availability from is required" id="PatientAvailableFrom" name="PatientAvailableFrom" type="datetime" value="">
                    <span class="field-validation-valid text-danger" data-valmsg-for="PatientAvailableFrom" data-valmsg-replace="true"></span>
                </div>
            </div>

将 d-flex 添加到 div 导致：

【问题讨论】：

这样的？ https://codepen.io/fede811/pen/BaNdLYQ
@IslamElshobokshy 这是我的代码，我需要修改它
只有html css等没有asp请
如果我的回答确实回答了您的问题，请将其标记为已回答以供将来参考。

标签： html css asp.net twitter-bootstrap

【解决方案1】：

只需在您的 div 中添加一个 d-flex 类：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="form-group">
  <label class="control-label col-md-4" for="MainDiagnosis">Main Diagnosis Code</label>
  <div class="col-md-8 d-flex">
    <input class="form-control text-box single-line" disabled="disabled" id="MainDiagnosis" name="MainDiagnosis" type="text" value="">
    <input type="button" value="click">
  </div>
  <span class="field-validation-valid text-danger" data-valmsg-for="MainDiagnosis" data-valmsg-replace="true"></span>

</div>

<div class="form-group">
  <label class="control-label col-md-4" for="PatientAvailableFrom">Available From</label>
  <div class="col-md-8">
    <input class="form-control text-box single-line hasDatepicker" data-val="true" data-val-date="The field Available From must be a date." data-val-required="Availability from is required" id="PatientAvailableFrom" name="PatientAvailableFrom" type="datetime"
      value="">
    <span class="field-validation-valid text-danger" data-valmsg-for="PatientAvailableFrom" data-valmsg-replace="true"></span>
  </div>
</div>

【讨论】：