如何使 Bootstrap 4 弹出框可滚动答案

【问题标题】：How to make Bootstrap 4 popovers scrollable如何使 Bootstrap 4 弹出框可滚动
【发布时间】：2018-11-27 15:19:13
【问题描述】：

我看到另一个这样的问题，但答案对我不起作用，我不知道为什么。为什么我的弹出框内容超过 50 像素时不滚动？还有一个问题：在我的变量“a”中，我的换行符在弹出框内不起作用。有人知道为什么吗？

var a = "hello \n hello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \n hello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \n";
$(function() {
  $('[data-toggle="popover"]').popover()
});

$("#button1").attr('data-content', a);

.popover-content {
  height: 10px;
  overflow-y: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<button id="button1" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="Hello">Click to toggle popover</button>

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

您定位到错误的班级。正确的类是popover-body：

.popover-body {
    height: 50px;
    overflow-y: auto;
    white-space:pre-wrap;
}

https://jsfiddle.net/gx27dbv3/

【讨论】：

成功了！您知道为什么 \n 字符在“a”变量中不起作用吗？
看看这个：stackoverflow.com/questions/13338780/…
这有效（来自您提供的链接）： .popover-body { white-space:pre-wrap; }
酷！我将其添加到答案中。