侧面模态全高页眉，正文和页脚不相等

时间：2018-08-01 11:41:09

标签： css modal-dialog bootstrap-4 bootstrap-modal

我创建了一个全高边模，它的内容很长 在模态主体内部，但是当我运行它时，标题和主体以及 页脚不等于我不知道是否在html主体上放置了scrollspy 标签会修复它，希望您能帮助我修复它。谢谢。

这是我的模态：

<div class="modal fade right" id="modalPoll" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"
      data-backdrop="false">
      <div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
        <div class="modal-content">
          <!--Header-->
          <div class="modal-header">
            <p class="heading lead">Feedback request
            </p>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true" class="white-text">×</span>
            </button>
          </div>
      <!--Body-->
          <div class="modal-body" >
            <div class="text-center">
              <i class="fa fa-file-text-o fa-4x mb-3 animated rotateIn"></i>
              <p>
                <strong>Your opinion matters</strong>
              </p>
              <p>Have some ideas how to improve our product?
                <strong></strong>Give us your feedback.</strong>
              </p>
            </div>
            <hr>
       <!-- Radio -->
            <p class="text-center">
              <strong>Your rating</strong>
            </p>
            <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-179" value="option1" checked>
          <label class="form-check-label" for="radio-179">Very good</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-279" value="option2">
          <label class="form-check-label" for="radio-279">Good</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-379" value="option3">
          <label class="form-check-label" for="radio-379">Mediocre</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-479" value="option4">
          <label class="form-check-label" for="radio-479">Bad</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-579" value="option5">
          <label class="form-check-label" for="radio-579">Very bad</label>
        </div>
            <!-- Radio -->
        <p class="text-center">
              <strong>What could we improve?</strong>
            </p>
            <!--Basic textarea-->
            <div class="md-form">
              <textarea type="text" id="form79textarea" class="md-textarea form-control" rows="3"></textarea>
              <label for="form79textarea">Your message</label>
            </div>
            </div>
          <!--Footer-->
          <div class="modal-footer justify-content-center">
            <a type="button" class="btn btn-primary waves-effect waves-light">Send
              <i class="fa fa-paper-plane ml-1"></i>
            </a>
            <a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Cancel</a>
          </div>
        </div>
      </div>
    </div>

这是我目前的输出： this is the header this is the footer

2 个答案:

答案 0 :(得分：0)

使用sticky-top到modal-header 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPoll">Launch modal</button>

<div class="modal fade right" id="modalPoll" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" id="myModal"
      data-backdrop="false">
      <div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
        <div class="modal-content">
          <!--Header-->
          <div class="modal-header sticky-top bg-primary">
            <p class="heading lead">Feedback request
            </p>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true" class="white-text">×</span>
            </button>
          </div>
      <!--Body-->
          <div class="modal-body" >
            <div class="text-center">
              <i class="fa fa-file-text-o fa-4x mb-3 animated rotateIn"></i>
              <p>
                <strong>Your opinion matters</strong>
              </p>
              <p>Have some ideas how to improve our product?
                <strong>Give us your feedback.</strong>
              </p>
            </div>
            <hr>
       <!-- Radio -->
            <p class="text-center">
              <strong>Your rating</strong>
            </p>
            <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-179" value="option1" checked>
          <label class="form-check-label" for="radio-179">Very good</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-279" value="option2">
          <label class="form-check-label" for="radio-279">Good</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-379" value="option3">
          <label class="form-check-label" for="radio-379">Mediocre</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-479" value="option4">
          <label class="form-check-label" for="radio-479">Bad</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-579" value="option5">
          <label class="form-check-label" for="radio-579">Very bad</label>
        </div>
            <!-- Radio -->
        <p class="text-center">
              <strong>What could we improve?</strong>
            </p>
            <!--Basic textarea-->
            <div class="md-form">
              <textarea type="text" id="form79textarea" class="md-textarea form-control" rows="3"></textarea>
              <label for="form79textarea">Your message</label>
            </div>
            </div>
          <!--Footer-->
          <div class="modal-footer justify-content-center">
            <a type="button" class="btn btn-primary waves-effect waves-light">Send
              <i class="fa fa-paper-plane ml-1"></i>
            </a>
            <a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Cancel</a>
          </div>
        </div>
      </div>
    </div>

答案 1 :(得分：0)

将您的模态内容 div 替换为：

<div class="modal-content py-0" style="max-height: 100%; overflow-y: auto;">...</div>
相关问题
最新问题