html - 将 Bootstrap Modal 上的 X 按钮更改为左侧

Question

我正在尝试建立一个新网站，我对 HTML CSS 等还很陌生。所以我从 Bootstrap 获得了一些帮助，但现在我遇到了一些问题。 我现在正在制作的网站的语言是希伯来语，当我在 Bootstrap 中打开模式时，我似乎无法将 X 的位置更改为左侧。

我已经试过给它一个 float of left ，并尝试对其进行内联样式，但它似乎不起作用。

<!-- Sign In Button -->
      <div class="container buttons">
        <a class="btn btn-light download " data-toggle="modal" data-target="#Sign-In-Modal">התחברו</a>
        <!-- Sign In Button Modal -->
        <div class="modal fade" id="Sign-In-Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">התחברות</h5>
            <button type="button" class="close pull-left" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body" style="text-align: right;">
            .הכנס שם משתמש וסיסמא בכדי להתחבר
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" style="float: left;" data-dismiss="modal">סגור</button>
            <button type="button" class="btn btn-light" style="background-color: #e3f2fd; float: left;">התחבר</button>
          </div>
        </div>
      </div>
    </div>

我希望模式标题位于右侧，而 X 位于窗口的左侧。 我希望得到一些帮助。

Answer 1

您可以通过更改 button 和 h5 元素的顺序并更改 modal-header .close 的自动边距来实现此目的。

正如@daryll 评论的那样，使用 bootstrap-rtl 是一个更可靠的选择: https://bootstrap.rtlcss.com

.modal-header .close {
    padding: 1rem 1rem;
    margin: -1rem auto -1rem -1rem;
}

<h5 class="modal-title order-2" id="exampleModalLabel">התחברות</h5>
<button type="button" class="close order-1" data-dismiss="modal" aria-label="Close">
   <span aria-hidden="true">×</span>
</button>