css - 如何使用引导程序在模态标题中的文本旁边添加按钮

Question

我有这个模态标题并希望在文本“优化数据”的右侧添加“下载”按钮。这是我的相同代码，但每次它都与模态标题文本的下方对齐。我也尝试过浮动和对齐属性，但它似乎没有用。

<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

modal-headerBootstrap 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 2

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

Answer 3

引导它自己有类“输入组”

您可以如下使用它。

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