javascript - 空白不会消失 bootstrap 4

Question

在以下代码片段的标题下，有一些空白不会消失。周围的元素上没有 margin-bottom 或任何其他填充，我很困惑它为什么存在。

代码:注意:您必须单击整页才能看到空白

$('#explanation').click(function () {
    // Make show/hide explanation text change on click
    if ($("#explanation").text() == "Show Explanation ▼") {
      $("#explanation").text("Hide Explanation ▲");
      $("#info").collapse("show");
    } else if ($("#explanation").text() == "Hide Explanation ▲") {
      $("#explanation").text("Show Explanation ▼");
      $("#info").collapse("hide");
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>

<br>
<br>
<div class="row hideWhenDone mx-auto" style="width: 80%;">
  <div class="col-sm-12 col-md-12 col-lg-8" id="excontainer" style="border: 1px solid #d8d8d8;border-radius: 5px;padding: 10px;">
    <h5 style="display: inline;" id="correctTxt">Correct!</h5>
    <a style="color: #007bff; float: right;cursor: pointer;" id="explanation">Show Explanation ▼</a>
    <h6 id="flag" style="padding-right: 175px;padding-top: 2px;float: right;cursor: pointer;">Flag Question ⚐</h6>
    <div id="info" class="collapse">
      <br id="seperator">
      <p id="explanation-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed condimentum ante. Phasellus blandit, magna eu dignissim tristique, lectus sem scelerisque enim, ac sollicitudin mauris sem quis tortor. Aenean vel ornare massa. Aenean velit nisi, consectetur ut sollicitudin tempor, aliquam a nulla. Vestibulum condimentum posuere sapien sit amet tincidunt. Maecenas hendrerit condimentum venenatis. Sed lacinia lacinia vulputate.
      </p>
    </div>
  </div>

  <div class="col-sm-12 col-md-12 col-lg-4" style="text-align: center;padding: 10px;">
    <button id="nxtQ" class="btn btn-primary" style="float: right;"><h5 id="btnText" style="font-size: 20px;display: inline-block;width: 200px;padding-top: 0px;">Next Question</h5></button>
  </div>
</div>

感谢任何帮助。

感谢您的宝贵时间

Answer 1

该问题是由列上的 flex 显示引起的，因此它们始终具有相同的高度。请注意，如果您将第二列(包含按钮的列)上的 padding: 10px 更改为 padding: 0，第一列将垂直收缩，从而删除“空白” ”。

因此，您要么需要减小按钮/按钮列的大小，要么将弹性项目垂直居中