在Bootstrap中，如何控制徽章的高度？

Question

我在这里有一个JSFiddle：

https://jsfiddle.net/bjfm703h/

此代码：

<div class="col-1 spacer"></div>
<div class="input-group input-group-alt flatpickr" id="flatpickr9" data-toggle="flatpickr" data-wrap="true">
    <input id="key-date-datepicker" type="text" class="form-control kd-datepicker" data-input="" v-model="date">
    <span>&nbsp;</span>
    <span class="badge badge-danger">Danger</span>
</div>

呈现如下：

徽章的高度与我输入的高度相同。相反，我希望徽章的高度与“危险”的高度相同，类似于：

https://getbootstrap.com/docs/4.3/components/badge/

我该怎么做？

Answer 1

input-group css类为元素提供了具有align-items: stretch属性的弹性布局。

您可以更改默认属性或向align-items添加其他类。

可能的解决方案：

.input-group{
  align-items: center !important;
}

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

<div class="input-group input-group-alt flatpickr" id="flatpickr9" data-toggle="flatpickr" data-wrap="true">
  <input id="key-date-datepicker" type="text" class="form-control kd-datepicker" data-input="" v-model="date">
  <span>&nbsp;</span>
  <span class="badge badge-danger">Danger</span>
</div>

Answer 2

只需将badge类更改为btn类。

使用btn类并不意味着您的项目必须是按钮，而只是提供了一些属性。

<span class="btn badge-danger">Danger</span>

Answer 3

我已经复制并修改了您的JSFiddle代码。尝试这个：

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
#bdg{
  padding-top: 12px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

         <div role="document" class="modal-dialog modal-lg modal-dialog-overflow">
            <div class="modal-content pl-3 pr-3">
               <div class="modal-body">
                  <div class="modal-body-scrolled border-primary border-bottom p-0 mt-2">
                     <div class="form-row">
                        <div class="col-12">
                           <div class="row ml-0 mr-0">
                              <div class="row form-inline col-12 mt-2 mb-2 pt-2 pb-2 m-0">
                                 <div class="row col-12 pl-0 pr-0 mb-2">
                                    <label for="duration" class="col-1 pl-0 justify-content-start align-items-start">Label</label>
                                    <div class="col-1 spacer"></div>
                                    <div class="input-group input-group-alt flatpickr" id="flatpickr9" data-toggle="flatpickr" data-wrap="true">
                                       <input id="key-date-datepicker" type="text" class="form-control kd-datepicker" data-input="" v-model="date">
                                       <span>&nbsp;</span>
                                       <span id="bdg" class="badge badge-danger">Danger</span>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>

编辑：（解决方案2）
只需使用btn和btn-danger类的引导程序即可。

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

         <div role="document" class="modal-dialog modal-lg modal-dialog-overflow">
            <div class="modal-content pl-3 pr-3">
               <div class="modal-body">
                  <div class="modal-body-scrolled border-primary border-bottom p-0 mt-2">
                     <div class="form-row">
                        <div class="col-12">
                           <div class="row ml-0 mr-0">
                              <div class="row form-inline col-12 mt-2 mb-2 pt-2 pb-2 m-0">
                                 <div class="row col-12 pl-0 pr-0 mb-2">
                                    <label for="duration" class="col-1 pl-0 justify-content-start align-items-start">Label</label>
                                    <div class="col-1 spacer"></div>
                                    <div class="input-group input-group-alt flatpickr" id="flatpickr9" data-toggle="flatpickr" data-wrap="true">
                                       <input id="key-date-datepicker" type="text" class="form-control kd-datepicker" data-input="" v-model="date">
                                       <span>&nbsp;</span>
                                       <span class="btn btn-danger">Danger</span>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>