如何为 ui-bootstrap popover 更改 .popover-content CSS答案

【问题标题】：How to Change .popover-content CSS for ui-bootstrap popover如何为 ui-bootstrap popover 更改 .popover-content CSS
【发布时间】：2017-06-25 00:17:52
【问题描述】：

我正在使用 ui-bootstrap 弹出框列出我的应用程序中的一些通知。我正在使用 uib-popover-template 来设计弹出框的内容。

我想更改弹出框内每个元素的填充设置。

我尝试过使用 popover-class 属性，但这只是为整个 popover 配置 CSS，而不是其中包含的元素 - 这似乎是 .popover-content CSS 类管理的内容。

这是弹出框的 html：

<span class="glyphicon glyphicon-globe" uib-popover-template="'myNotifications.html'"
        popover-class="my-notifications-popover"></span>

另外，我不想这样做：

.popover-content {
     margin: 0px;
}

因为我在整个应用程序中的多个地方都使用了弹出框，并且不希望它们都重新定义其 CSS。

谁能告诉我如何以正确的方式改变它？非常感谢所有帮助...

编辑 1：我尝试按照 makshh 在 cmets 中的建议进行操作，并使用 CSS 选择器来修改“.popover-content”类。此类是包含在父 '.popover' 类中的 div。

我尝试通过以下方式做到这一点：

.my-notifications-popover {
    margin-left: 0px;
}

.my-notifications-popover div {
    margin-left: 0px;
}

这应该使 .my-notifications-popover 的所有子 div 的 margin-left 为零，这应该应用于 popover。但是，它似乎根本不适用。这种方法可能并不理想，因为它会将所有 div 的边距设置在我可能不想要的弹出框下方。有没有办法专门使用 CSS 选择器专门针对 .popover-content 类？

我创建了一个 plnkr 来准确展示它是如何不起作用的......你可以在这里看到它：https://plnkr.co/edit/Lr43L5b0YUbZEa5Zkvso

【问题讨论】：

使用my-notifications-popover 类来设置内部元素的样式有什么问题？
这似乎只为外部 .popover 类设置样式
是的，但是例如，如果您的弹出框内容中有h3 标签，您可以使用.my-notifications-popover h3 选择器对其进行样式设置。
只修改popover容器模板github.com/angular-ui/bootstrap/blob/master/template/popover/…
那么做这件事的代码是什么？我试过： .my-notifications-popover > .popover-content { margin-left: 0px; } 但这没有用

标签： css twitter-bootstrap angular-ui-bootstrap popover

【解决方案1】：

添加

.popover-no-margin .popover-content {
  padding: 0px; 
}

https://plnkr.co/edit/NiIh6qwZiscNZC5ZZrod?p=preview

因为你传递了自定义类而有效

popover-class="popover-no-margin"

【讨论】：

【解决方案2】：

看来需要更改的是填充而不是边距！真是个白痴...哦，好吧...对此感到抱歉...仍然不确定仅针对popover-content div的最准确方法是什么

【讨论】：

【解决方案3】：

将此添加到您的 plunker 示例中。.popover-no-margin .popover-content{ padding:0px; } 并检查这是否是您想要的。这将删除弹出框中的额外空格，并且仅当您已经为此元素定义了类 popover-no-margin 时才会应用于此弹出框。

【讨论】：

【解决方案4】：

只需检查我的代码 css 是否反映了弹出内容。您可以通过将 css 添加到 popover-content .popover-line 或为 popover-class="my-popover-class" 创建自定义 css 来处理 popover 的 css：

HTML

<button popover-class="my-popover-class" popover-placement="right" uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button>   <script type="text/ng-template" id="myPopoverTemplate.html">
    <div class="popover-line"> item 1 : This an example of angular ui-bootstrap popover custom content css</div>
    <div class="popover-line"> item 2</div>
    <div class="popover-line"> item 3</div> </script>

CSS

 .popover-content .popover-line { margin: 10px 0px; } 
.my-popover-class {   color: blue;   padding-left: 0 !important;}

工作演示是here

您可以根据需要在 .popover-content .popover-line 中相应地添加您的 CSS（如颜色、边距、填充等）

【讨论】：

【解决方案5】：

我检查了你的代码。你错过了什么。动态创建的内容无法加载现有的 CSS 或 Js。当您 click 和 button 时，您应该加载 css 和 js。只要按照这种方式。我希望它能很好地工作。

<script type="text/ng-template" id="popoverTemplate.html">
        <div class="popover-line"> item 1</div>
        <div class="popover-line"> item 2</div>
        <div class="popover-line"> item 3</div>
        <style>
        .popover-content{
          display: block;
          width: 200px;
        }
        .popover-content .popover-line{
          background-color: #ff00ff;
          border-bottom: 2px solid #121212;
          padding: 10px 15px;
        }
        </style>
    </script>

如果您以这种方式编写自定义CSS，那么它将起作用。请看下图我是如何编写代码的。

希望对你的项目有所帮助。

【讨论】：