Question

我正在使用Bootstrap4。我希望模式正确对齐（请参见图片说明）：

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

    public class ProjectDTO
    {
           public int ProjectId { get; set; }
           [Required(ErrorMessage = "Name field is required.")]
           public string Name { get; set; }
           [Required(ErrorMessage = "IsInternal field is required.")]
           public bool IsInternal { get; set; }
    }

感谢您在此方面的帮助。

Answer 1

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

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

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

在Bootstrap 4的右侧对齐Modal

3 个答案: