完美匹配 Bootstrap 卡片中的 <option> 标签列表

Question

我正在使用 Angular 和 Bootstrap 4.0 并想使用 <select> 和<option>、<optgroup> card

以内

component.html 的代码在这里：

<div class="container">
    <h4> Property Explorer</h4>
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">Available Properties</div>
                <div class="card-body">
                    <label for="typeahead-template"><span>Search</span></label>
                    <input id="typeahead-template" type="text" class="form-control">

                    <select size="10" class="custom-select mr-4" style="height: auto">
                        <optgroup label="Properties">
                            <option *ngFor="let eachVal of dataResults"
                                    (click)="getPropValues(eachVal)">
                                {{eachVal.translatedProperty}}
                            </option>
                        </optgroup>
                        <optgroup label="References">
                            <option *ngFor="let eachVal of objResults"
                                    (click)="getReferenceValues(eachVal)"
                            >
                                {{eachVal.translatedProperty}}</option>
                        </optgroup>
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>

当前输出

当为 *ngFor 卡加载数据时，如下所示：

预期

有没有更好的方法来对齐卡片中的 input 和 select 标签？

我不得不使用 style="height:auto" 来提高 select 的高度，否则我无法清楚地看到 select 标签。

Answer 1

在 select 上使用 bootstrap class form-control 将应用 Bootstrap 非常棒的 CSS 使其看起来和感觉正确内Bootstrap卡

注意：我还在输入/selects 周围添加了一些 <div class="form-group"> 容器，以添加所需的间距/填充（form-group 是另一个 Bootstrap class 旨在做到这一点):

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h4> Property Explorer</h4>
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">Available Properties</div>
        <div class="card-body">
          <div class="form-group">
            <label for="typeahead-template"><span>Search</span></label>
            <input id="typeahead-template" type="text" class="form-control">
          </div>
          <div class="form-group">

            <select size="10" class="form-control mr-4">
              <optgroup label="Properties">
                <option>An Option</option>
                <option>An Option</option>
                <option>An Option</option>
                <option>An Option</option>
                <option>An Option</option>
              </optgroup>
              <optgroup label="References">
                <option>An Option</option>
                <option>An Option</option>
                <option>An Option</option>
                <option>An Option</option>
                <option>An Option</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

请注意，您还使用了 custom-select，它实际上不是您要查找的内容，因此我将其删除。

完美匹配 Bootstrap 卡片中的 <option> 标签列表

fit the list of <option> tags within a Bootstrap card perfectly

html

html-select

bootstrap-4

当前输出

预期