Html 更改twitter引导弹出窗口的宽度

我正在尝试使用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内容保持在一条线上。这可能吗

<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.">

---

我正在使用C#、html和css。

您可以使用css更改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{
    width:200px;
    height:250px;    
}

但是CSS将改变所有的弹出窗口。您需要做的是将按钮放在容器元素中并使用CSS，如下所示：

<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.">

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

您还需要更改

数据容器=“#containerElem”

以匹配您的容器

<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的宽度大于276px，则还需要覆盖

max width

属性。因此，将

max-width:none

添加到

.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.">

---

这里有一个jsFiddle:

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

<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.">

HTML（来自引导的示例）

<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.">

<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.">

---

• 您还可以在按钮元素上添加

  数据最大宽度

  属性，并在触发器函数中获取值：

<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.">

---

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

<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.">

添加以下css类：

<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.">

.app-popover-fw{宽度：276px；}

<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使用以下模板

<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.">

var newPopoverTemplate = '<div class="popover app-popover-fw" role="popover">' +
                             '<div class="arrow"></div>'+ 
                             '<h3 class="popover-title"></h3>'+
                             '<div class="popover-content"></div>'+
                          '</div>';

$('#example').popover({template: newPopoverTemplate });`

var newPopoOverTemplate=''+
''+ 
''+
''+
'';
$（'#示例'）.popover（{template:newPopoOverTemplate}）`

工作小提琴：

<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.">

NB：正如其他人所说，bs Popover上有一个“最大宽度”属性。如果您希望您的popover大于276px，则需要更改此选项。

.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{
    max-width: 100%;
    width: <width>;
}

最大宽度：100%；
宽度：；
}

“最大宽度”将popover的最大宽度设置为页面宽度。

---

然后，您可以根据自己的喜好设置宽度

您可以调整popover的宽度，但最好的做法是在启动之前定义内容的宽度。例如，我有一个表，我定义了它的宽度，然后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 {
      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;
    }

---

使用此代码。它可以很好地工作：

<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{
       background-color:#b94a48;
       border:none;
       border-radius:unset;
       min-width:100px;
       width:100%;
       max-width:400px;
       overflow-wrap:break-word;
    }

---

您可以通过两种方式实现这一点，一种是通过减少“popover”类的字体大小，另一种是通过减少“popover content”类中的填充。这是我如何做到的

<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 {
  font-size: 12px;
}

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

---

另一个选项是使用自定义模板，如（仅添加了附加类：popover lg）：

<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.">

调用：

<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.">

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

---

这样，它是干净的，不会干扰原始引导行为

您可以使用CSS增加Popor的宽度

<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{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

---

我发现，在CSS覆盖类中不直接覆盖popover属性的情况下，影响popover属性的最佳方法是在实例化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中的max width就可以了，但是你必须接受这种覆盖，这基本上违背了目的

<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的容器设置为触发元素的容器，然后创建一个复杂的CSS类，如.container>.popover，它只为该实例设置popover的最大宽度。

您可以更改.popover的最大宽度CSS属性。谢谢，这是一个很好的回答。包装很好，但如果我将容器的宽度设置为“10000px”，那么“Vivamus sagittis lacus vel augue”仍然在一行，而“laoreet rutrum faucibus”在第二行，这就是你的意思吗？事实上，我看不出容器元素上10000px的宽度有什么不同。现在每个单词对于每个小提琴都在单独的一行上？通过设置包裹宽度，我希望所有内容都在一行上。Bootstrap在CSS中设置了一个

max width

属性，所以我只需要覆盖它。这就解决了这个问题：好答案，对我有用。虽然我发现：“最大宽度：600px；宽度：auto；”也有效。我尝试了20种不同的版本，这一个只对我有效。谢谢

<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.">