Выровняйте элементы в div, используя Bootstrap 4 - PullRequest
Новая
       6

Выровняйте элементы в div, используя Bootstrap 4

0 голосов
/ 17 сентября 2018

Я новичок в интерфейсе. Вопрос, который я задаю, может быть очень простым. Здесь я использую ReactJS.

enter image description here

Итак, на самом деле, я пытаюсь это сделать. Итак, что я пробовал это 

<div className="row">
    <div className="col-10" style={selectques}>
        <div className="row">
            <div className="col-4">
                <span className="align-middle">1</span>
            </div>
        </div>
    </div>
    <div className="col-2">
    </div>
</div >

Здесь я попытался использовать select, но все равно он не работал должным образом. Кто-нибудь может подсказать мне, как это сделать? И выровнять это так, как есть? Любой намек будет полезен.

1 Ответ

0 голосов
/ 17 сентября 2018

По умолчанию Сетка начальной загрузки использует макет flexbox. Это означает, что строки (теги с классом .row) имеют display: flex.

По сути, это означает, что вы должны выровнять элементы вдоль поперечной оси на текущей линии. Для этого вы должны использовать align-items . Bootstrap уже имеет вспомогательных классов для него . Так что вам просто нужно добавить соответствующий к вашему .row: 

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

<div class="row align-items-center" style="background-color: #f7f7f7;">
  <div class="col">normal text</div>
  <div class="col-auto"> <input type="text"> </div>
  <div class="col"><h1>Big text</h1></div>
  <div class="col">
    <select>
      <option value="1" selected>Option 1</option>
      <option value="1">Option 2</option>
    </select>
  </div>
</div>
...