Question

我正在尝试使用bootstrap 3更改twitter bootstrap popover的宽度：

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">

$('#popover').popover(options)

目前，popover中的内容分布在两行上。我希望popover内容保持在一行。这可能吗？

我正在使用C＃，html和css。

Answer 1

您可以使用CSS更改弹出窗口的尺寸：

.popover{
    width:200px;
    height:250px;    
}

但CSS会改变所有的弹出窗口。你需要做的是将按钮放在容器元素中并使用这样的CSS：

#containerElem .popover {
  width:200px;
  height:250px;
  max-width:none; // Required for popovers wider than 276px (Bootstrap's max-width for popovers)
}

您还需要更改data-container="#containerElem"以匹配您的容器。

注意：如果您的popover的宽度大于276px，则还需要覆盖max-width属性。请将max-width: none添加到.popover {}类。

这是一个jsFiddle：http://jsfiddle.net/4FMmA/

Answer 2

如果你想在javascript中控制宽度：

HTML（来自Bootstrap的示例）

<button id="exampleButton" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top</button>

<强>使用Javascript：

我们在触发show.bs.popover事件时设置最大宽度：

var p = $("#exampleButton").popover();
p.on("show.bs.popover", function(e){
    p.data("bs.popover").tip().css({"max-width": "500px"});
});

http://jsfiddle.net/ctoesca/u3kSk

您还可以在按钮元素上添加data-max-width属性并获取触发器功能中的值：

p.on("show.bs.popover", function(e){
    var w = $(this).attr("data-max-width");
    p.data("bs.popover").tip().css({"max-width": w});
});

Answer 3

.popover{
    max-width: 100%;
    width: <width>;
}

＆＃39; max-width＆＃39;将popover的max-width设置为页面的宽度。然后，您可以根据需要设置宽度

Answer 4

我可能有一个更简单的解决方案：

添加以下 css类：

.app-popover-fw { width: 276px; }

将以下模板用于您的popover

.app-popover-fw { width: 276px; }

工作小提琴：http://jsfiddle.net/b5Ly2ynd/

NB ：正如其他人所说，有一个＆＃34; max-width＆＃34; bs popovers上的财产。如果你想要你的popover大于276px，你需要改变这个。

Answer 5

您可以调整弹出窗口的宽度，但最好的办法是在Bootstrap看到之前定义内容的宽度。例如，我有一个表，我定义了它的宽度，然后bootstrap构建了一个适合它的弹出框。（有时Bootstrap无法确定宽度，您需要介入并握住它的手）

Answer 6

使用此代码。它会正常工作：

  .popover{
       background-color:#b94a48;
       border:none;
       border-radius:unset;
       min-width:100px;
       width:100%;
       max-width:400px;
       overflow-wrap:break-word;
    }

Answer 7

我使用了以下代码：

.popover {
      width: 600px;
      max-width: 600px;
      font-size: 13px;
      font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
      word-break: break-all;
      word-wrap: break-word;
      white-space: pre;
      width: 600px;
    }

Answer 8

另一个选择是使用自定义模板（仅添加其他类：popover-lg）：

<div class="popover popover-lg" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>

然后在css：

.popover-lg {
    max-width: 100%;
}

调用：

$(".your-element")..popover({
        trigger: "hover",
        template: templateString,
        container: "body",
        content: '...',
    });

这种方式很干净，不会干扰原始的引导行为。

Answer 9

你可以通过两种方式实现这一目标，一种方法是减少班级的字体大小＆＃39; popover＆＃39;另一种方法是减少课程中的填充＆＃39; popover-content＆＃39;。这就是我实现它的方式，

.popover {
  font-size: 12px;
}

.popover-content {
  padding: 5px 5px;
}

Answer 10

您可以使用CSS来增加弹出窗口的宽度。

.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

Answer 11

我发现影响弹出框属性而不在CSS覆盖类中直接覆盖它们的最好方法是在实例化弹出框时使用容器属性，然后使用复杂的选择器覆盖属性，从而保留原始属性您可能希望在网站的其他区域添加其他弹出窗口。

当然可以简单地在.popover中覆盖max-width，但是您必须对所有内容都使用该覆盖，这实际上是违背了目的。

我要做的是将我的弹出框的容器设置为触发元素的容器，然后创建一个复杂的CSS类，如.container> .popover，该类仅为该实例设置弹出框的最大宽度。

更改twitter bootstrap popover的宽度

11 个答案: