how to add button next to a text in a modal header using bootstrap

问题

I have this modal header and wish to add the "download" button to the right of the text "Optimize data". Here is my code for the same but everytime it aligns to the below of the modal header text. I have also tried float and align properties but it didnt seem to work.

<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>

回答1:

<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>

回答2:

The modal-header in Bootstrap 4 is display:flex. Use ml-auto to push the button to the right...

<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

回答3:

bootstrap it self has class "input-group"

You can use that as below.

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

来源：https://stackoverflow.com/questions/51044024/how-to-add-button-next-to-a-text-in-a-modal-header-using-bootstrap