Question

在以下代码段的标题下，有一些不会消失的空白。周围的元素没有边缘底部或任何其他填充物，我对它存在的原因感到困惑。

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

$('#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

将以下样式应用于段落标记，空格将被删除，

 p{
    word-break: break-all;
  }

Answer 2

问题是由列上的flex显示引起的，因此它们的高度始终相等。请注意，如果您将第二列（包含该按钮的列）上的padding: 10px更改为padding: 0，则第一列将垂直缩小，删除“空格”。

因此，您需要缩小按钮/按钮列大小，或垂直居中弹性项目

白色空间不会离开bootstrap 4

2 个答案: