Как выровнять текст начальной загрузки и кнопку по горизонтали

Question

Я кодирую с реакции и начальной загрузкой.Выложенная кнопка и текст, как показано ниже.

  <div>
    <h3> <strong>"Title"</strong> </h3>
    <Button color="primary" className="mr-xs">
      <i className="fa fa-check mr-xs mb-xs" />Edit
    </Button>
  </div>

, но я хочу выровнять текст и кнопку по горизонтали, как показано ниже.хотите зарезервировать некоторое пространство между текстом и кнопкой

Любой простой способ сделать это, используя имя класса начальной загрузки или CSS?

Answer 1

Вы можете достичь этого, сделав-

<div className="row">
    <div className="col-6">
        <h3><strong>"Title"</strong> </h3>
    </div>
    <div className="col-6">
        <Button color="primary" className="mr-xs">
         <i className="fa fa-check mr-xs mb-xs" />Edit
        </Button>
    </div>
</div>

Answer 2

Использование только Bootstrap

Сделайте ваш div гибким дисплеем, а затем используйте поля для получения соответствующего результата или justify-content-start, justify-content-end, justify-content-center и т. Д.

<div className="d-flex flex-row">
    <div >
        <h3><strong>"Title"</strong> </h3>
        <Button color="primary" className="mr-xs">
         <i className="fa fa-check mr-xs mb-xs" />Edit
        </Button>
    </div>
</div>

Вы можете посмотреть документацию Bootstrap для более подробной информации о ".d-flex" здесь .

Answer 3

Оберните код в <div class='row'></div>