如何设置弹出框的字体大小？答案

【问题标题】：How to set font size for popover?如何设置弹出框的字体大小？
【发布时间】：2018-02-27 01:01:06
【问题描述】：

我不得不问一个简单的 CSS 问题，因为我的 CSS 不太好。我已经完成了一个弹出模式功能，因此当用户将鼠标悬停在链接上时，模式会显示为

但是您可以看到标题显示非常大，我怎样才能使字体变小？我似乎无法为此找到 CSS。我的代码如下：

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top',
        trigger : 'hover'
    });
});
</script>

&lt;a href="{{action('AltHr\Chatbot\ChatbotController@queries', [$companyID, $entityType, $entityValue])}}" class="btn btn-link" data-toggle="popover" title="{{ucwords($entityValue)}}" data-content="Default popover"&gt;{{ucwords($entityValue)}}&lt;/a&gt;

<style type="text/css">
  /* Popover Header */
  .popover-title {
      font-size: 12px;
  }
  /* Popover Body */
  .popover-content {
      font-size: 12px;
  }
</style>

它正在使用引导程序。

【问题讨论】：

你使用的是什么版本的引导程序？
尝试设置popover的最大宽度
@davecar21 3.x?
但我想设置字体大小@Sharvan
Apply CSS to popover in Bootstrap的可能重复

标签： javascript jquery html css

【解决方案1】：

对弹出框的标题和正文使用 font-size 属性应该会有所帮助。

    /* Popover Header */
    .popover-title {
        font-size: 14px;
        text-align:center;
    }
    /* Popover Body */
    .popover-content {
        font-size: 10px;
        text-align:center;
    }

【讨论】：

嗨，这适用于 .popover-content 但不适用于 .popover-title

【解决方案2】：

不知道我有哪个版本，但就我而言是：

    .popover-header {
        font-size: 12px;
    }

    .popover-body {
        font-size: 13px;
    }

【讨论】：

【解决方案3】：

值得注意的是，popover 中字体大小的异常可能与它所在的容器有关。在尝试更改任何 CSS 之前，请尝试通过以下方式设置容器 data-container="body"。您可以使用任何其他容器，它将继承该容器的字体信息。

默认情况下，它将继承创建它的任何容器。

例如：

body {
    font-size: 12pt;
}

ul {
    font-size: 72pt;
}

<ul>
    <li data-toggle="popover" data-content="foobar">test</li>
</ul>

也会导致弹出框的字体很大。但是，您可以这样做：

body {
    font-size: 12pt;
}

ul {
    font-size: 72pt;
}

<ul>
    <li data-toggle="popover" data-content="foobar" data-container="body">test</li>
</ul>

并且弹出框的字体大小为 12pt。

【讨论】：

【解决方案4】：

如果你使用的是 v4.x，试试这个 css 设置

    .popover {
      border: 1px dotted #ccc !important;
      max-width: 600px !important;
    }
    
    .popover-body{
      color: black !important;
      font-size: 12px !important;
      max-width: 600px !important;
        
    }

【讨论】：