白色空间不会消失引导程序 4答案

【问题标题】：White Space not going away bootstrap 4白色空间不会消失引导程序 4
【发布时间】：2018-03-29 20:57:27
【问题描述】：

在以下代码 sn-p 的标题下，有一些空格不会消失。周围元素上没有 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>

感谢您的帮助。

感谢您的宝贵时间

【问题讨论】：

你说的是哪个空格？
你是指盒子周围的填充吗？
_reboot.scss 包含 p { margin-bottom: $paragraph-margin-bottom; } 导致底部有额外的边距。

标签： javascript html bootstrap-4 accordion

【解决方案1】：

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

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

【讨论】：

那么我可以从 div 中删除 row 的类吗？

【解决方案2】：

将以下样式应用于您的段落标签空白将被删除，

 p{
    word-break: break-all;
  }

【讨论】：