在 Bootstrap 4 的右侧对齐 Modal

Question

我正在使用 Bootstrap 4。我希望模态正确对齐（见图片我的意思）：

到目前为止，这是我的代码。我从 Bootstrap 文档中得到它：

<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#exampleModalScrollable" id="btn1">mehr Erfahren</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalScrollableTitle">Winkelstufe</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Schliessen</button>         
        </div>
      </div>
    </div>
  </div>

感谢您对如何操作的帮助。

Answer 1

我搜索了很多，但没有找到一个好的答案，所以我不得不从头开始。比我想象的要容易：

<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
<style>
.modal-dialog {
    position: fixed;
    margin: auto;
    width: 320px;
    height: 100%;
    right: 0px;
}
.modal-content {
    height: 100%;
}
</style>
<div class="container demo">
  <div class="text-center">
    <button type="button" class="btn btn-demo" data-toggle="modal" data-target="#myModal2"> Right Sidebar Modal </button>
  </div>
  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          Right Sidebar </div>
        <div class="modal-body">
          <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>

Answer 2

更改您的 HTML：

  <!-- Modal -->
        <div class="modal right fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
            <div class="modal-dialog" role="document">
                <div class="modal-content">

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel2">Right Sidebar</h4>
                    </div>

                    <div class="modal-body">
                        <p>Text</p>
                    </div>

                </div><!-- modal-content -->
            </div><!-- modal-dialog -->
        </div><!-- modal -->

示例：https://codepen.io/bootpen/pen/jbbaRa

Answer 3

如果您使用 Bootstrap 4 进行网格化

    <div class="container">
      <div class="row">
   // <!--this for image model-->
        <div class="col-md-7">

        </div>

    <!--this for right model-->
        <div class="col-md-4">

    // your code here //


        </div>
      </div>
    </div>