идеально вписаться в список <option>тегов на карте Bootstrap

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

Использование класса начальной загрузки form-control на выборку применит довольно удивительный CSS Bootstrap, чтобы он выглядел и чувствовал себя корректно в карте Bootstrap

ПРИМЕЧАНИЕ: я также добавил несколько<div class="form-group"> контейнеры вокруг ввода / выбора, чтобы добавить желаемый интервал / отступ (form-group - это еще один класс Bootstrap, предназначенный именно для этого):

<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 , который на самом деле выглядит как , а не , что вы искали, поэтомуЯ удалил это.