как добавить кнопку рядом с текстом в модальном заголовке с помощью начальной загрузки

Question

У меня есть этот модальный заголовок и я хочу добавить кнопку «скачать» справа от текста «Оптимизировать данные». Вот мой код для того же, но каждый раз, когда он выравнивается по тексту заголовка модального ниже. Я также пробовал использовать свойства float и align, но, похоже, это не сработало.

<div class="modal-header">
                <h3 class="align:left" translate>{{Title}}</h3>
                <div class=align:"right">
                    <button type="button" class="btn btn-info" id="downloadLog" translate>Download Log</button>
               </div>

   </div>

Answer 1

Самозагрузка имеет класс «input-group»

Вы можете использовать это, как показано ниже.

<div class="input-group">
   <span>
     <a href="#" />
   </span>
</div>

Answer 2

modal-header в Bootstrap 4 равно display:flex. Используйте ml-auto, чтобы нажать кнопку вправо ...

<div class="modal-header">
      <h3>Title</h3>
      <div class="ml-auto">
          <button type="button" class="btn btn-info" id="downloadLog" translate>Download Log</button>
      </div>
</div>

https://www.codeply.com/go/qPMA41arJV

Answer 3

<h3> is an element that use the entire line so you should add an row, and two columns and then you will can do that

 <div class="row">
   <div class="col-8">
    <h3>Text</h3>
   </div>
   <div class="col-4">
    <button>Button here</button>
   </div>
 </div>