【问题标题】:Bootstrap 4 Modal alignment issueBootstrap 4模态对齐问题
【发布时间】:2018-09-11 12:44:39
【问题描述】:

Bootstrap 模式突然决定对我失败.. 一直在寻找解决方案,但由于我没有使用 Bootbox 或测试版,所以没有任何问题符合我的问题。

这是模态的样子:

模式代码:

<div class="modal fade" id="successmodal" tabindex="-1" role="dialog" aria-labelledby="successmodalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <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="successmodalLabel">This is a title</h4>
      </div>
      <div class="modal-body">
        This is a message
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

我使用 jquery 显示它,我正在使用这个 CDN:

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js

这种风格的 CDN(?):

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css

【问题讨论】:

    标签: html css bootstrap-4 bootstrap-modal


    【解决方案1】:

    面临同样的问题! 不知何故,它只是通过交换按钮和标题位置来纠正,即

    <h4 class="modal-title" id="successmodalLabel">This is a title</h4>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    

    【讨论】:

      【解决方案2】:

      您是否正确添加了所有内容?

      我能够完美地获得引导模式。在此处查看代码笔:https://codepen.io/immnk/pen/dmKPowCodepen

      <div class="modal" tabindex="-1" role="dialog">
       <div class="modal-dialog" role="document">
       <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
      

      记得把这些包括在内:

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      

      【讨论】:

        【解决方案3】:

        发生这种情况的原因有很多:

        模式或标题或关闭按钮的任何 css 覆盖 它可以很容易地解决

        <h4 class="modal-title pull-left" id="successmodalLabel">This is a title</h4>
        

        如果没有 那么

        #successmodalLabel{
        display:inline;
        float:left;
        }
        

        或使用

         #successmodalLabel{
            display:inline;
             width:100%;
             text-align:left;
            }
        

        【讨论】:

        【解决方案4】:

        你的标题在右边的原因是因为bootstrap添加了:

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

        强制关闭按钮向右,在您的情况下,标题在按钮之后

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2021-03-28
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2014-12-23
          • 2014-09-07
          • 1970-01-01
          相关资源
          最近更新 更多