如何设置弹出窗口的字体大小？

Question

我有一个关于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>

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

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

它正在使用Bootstrap。

- Rajveer Singh

---

你使用的是哪个版本的Bootstrap？ - davecar21

尝试为弹出框设置最大宽度。 - Saravana

@davecar21 3.x? - Rajveer Singh

但是我想设置字体大小 @Sharvan - Rajveer Singh

可能是在Bootstrap中应用CSS到弹出框的重复问题。 - davecar21

Answer 1

使用字体大小属性来设置弹出窗口的标题和主体内容应该会有所帮助。

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

- Abhi

---

嗨，这对于.popover-content有效，但对于.popover-title无效。 - Rajveer Singh

Answer 2

我不知道我使用的是哪个版本，但在我的情况下，它是：

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

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

- Volmarg Reiso

Answer 3

值得注意的是，弹出框中字体大小的异常可能与其所在的容器有关。在尝试更改任何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。

- dmarra

Answer 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;
        
    }

- Akram Elhaddad