Html 使用引导关闭文本居中面包卷右侧的按钮

因此，我试图创建一个模式，在顶部有一个居中的面包圈，在右边有一个关闭按钮，在面包圈的同一行上

我使用的是bootstrap3

这是我的密码：

<div class="modal container">
  <div class="modal-content col-sm-6 col-sm-offset-3">
    <div class="row text-center">
      <div class="breadcrumb-container">
        <ol class="breadcrumb modal-breadcrum">
          <li class="breadcrumb-step step-one">Abonnement</li>
          <li class="breadcrumb-step step-two">Inscription</li>
          <li class="breadcrumb-step step-three">Paiement</li>
        </ol>
        <button type="button" class="close" aria-label="Close">
          <span id="close-btn" aria-hidden="true">&times;</span>
        </button>
      </div>
    </div>
  </div>
</div>    

打开
铭文
付款
&时代；

这样，面包屑就位于正确的位置，位于模态的顶部。 但是关闭按钮也在中间，包裹在面包屑下面

我怎样才能做到这一点

我真正想要的是：

<!-- some space here --> centered Breadcrum <!-- some space here --> X

中心面包屑X

好的，经过一些研究，我找到了一个很好的解决方案：

只需将按钮从行中取出，实际上在面包屑行之前：

<div class="modal container">
  <div class="modal-content col-sm-6 col-sm-offset-3">
    <button type="button" class="close" aria-label="Close">
      <span id="close-btn" aria-hidden="true">&times;</span>
    </button>
    <div class="row text-center">
      <div class="breadcrumb-container">
        <ol class="breadcrumb modal-breadcrum">
          <li class="breadcrumb-step step-one">Abonnement</li>
          <li class="breadcrumb-step step-two">Inscription</li>
          <li class="breadcrumb-step step-three">Paiement</li>
        </ol>
      </div>
    </div>
  </div>
</div> 

&时代；
打开
铭文
付款

---

注意，正如@Minal Chauhan提到的，按钮必须具有

float:right

属性，bootstrap

close

类将其提供给按钮。

使用

float:right

将按钮放置在右侧。@Minal Chauhan，谢谢您的帮助！

close

引导类已经具有

float:right

属性。但是，它仍然将按钮包裹在面包屑下面。我想结尾少了一个b