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

【问题标题】：how to add button next to a text in a modal header using bootstrap如何使用引导程序在模态标题中的文本旁边添加按钮
【发布时间】：2018-12-05 05:48:50
【问题描述】：

我有这个模态标题并希望在“优化数据”文本的右侧添加“下载”按钮。这是我的相同代码，但每次它都与模态标题文本的下方对齐。我也尝试过 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>

【问题讨论】：

那些不是类名...class="align:left"

标签： css bootstrap-4

【解决方案1】：

Bootstrap 4 中的modal-header 是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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

你可以像下面这样使用它。

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

【讨论】：