Question

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

我已经尝试过给它添加一个左浮点，并尝试对其进行内联样式化，但是它似乎不起作用。

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

将Bootstrap模式上的X按钮更改为左侧

1 个答案: