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

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

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

Answer 3

引导它自己具有类“ input-group”

您可以按以下方式使用它。

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

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

3 个答案: