如何使Bootstrap 4弹出窗口可滚动 [英] How to make Bootstrap 4 popovers scrollable

问题描述

我看到了另一个类似的问题，但是答案对我没有用，我不确定为什么.超过50像素时，为什么我的弹出窗口内容没有滚动?还有一个侧面的问题:在变量"a"中，我的换行符在弹出框内不起作用.有人知道为什么吗?

I saw another question like this, but the answer didn't work for me and I'm not sure why. Why isn't my popover content scrolling when over 50px? Also side question: in my variable 'a', my newlines aren't working within the popover. Anyone know why?

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>

推荐答案

您定位的是错误的类.正确的类是 popover-body :

You're targeting the wrong class. The correct class is popover-body:

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

https://jsfiddle.net/gx27dbv3/

这篇关于如何使Bootstrap 4弹出窗口可滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！