Html 更改 twitter bootstrap popover 的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22268374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing the width of twitter bootstrap popover
提问by user3395822
I am trying to change the width of twitter bootstrap popover using bootstrap 3:
我正在尝试使用 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)
At the moment the content in the popover spreads over two lines. I want the popover content to stay on one line. Is this possible?
目前，popover 中的内容分布在两行中。我希望 popover 内容保持在一行。这可能吗？
I am using C#, html and css.
我正在使用 C#、html 和 css。
回答by Gavin
You can change the popover's dimensions with CSS:
您可以使用 CSS 更改弹出框的尺寸：
.popover{
width:200px;
height:250px;
}
But that CSS will change ALL popovers. What you need to do is put the button in a container element and use CSS like this:
但是那个 CSS 会改变所有的弹出框。你需要做的是把按钮放在一个容器元素中，并像这样使用 CSS：
#containerElem .popover {
width:200px;
height:250px;
max-width:none; // Required for popovers wider than 276px (Bootstrap's max-width for popovers)
}
You also need to change data-container="#containerElem"to match your container.
您还需要更改data-container="#containerElem"以匹配您的容器。
NOTE: If your popover is going to have a width greater than 276px, you need to override the max-widthproperty as well. So add max-width: noneto the .popover {}class.
注意：如果您的弹出窗口的宽度将大于 276 像素，您还需要覆盖该max-width属性。所以添加max-width: none到.popover {}类。
Here's a jsFiddle: http://jsfiddle.net/4FMmA/
这是一个 jsFiddle：http: //jsfiddle.net/4FMmA/
回答by c-toesca
If you want to controle the width in javascript:
如果你想在 javascript 中控制宽度：
HTML (example from Bootstrap)
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:
Javascript：
We set the max-width when show.bs.popoverevent is triggered:
我们设置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
http://jsfiddle.net/ctoesca/u3kSk
- You can also add a
data-max-widthattribute on the button element and get the value in the trigger function:
- 您还可以
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});
});
回答by sunnyiitkgp
.popover{
max-width: 100%;
width: <width>;
}
The 'max-width' sets max-width of popover to the width of the page. You can then set the width as you like
'max-width' 将 popover 的最大宽度设置为页面的宽度。然后您可以根据需要设置宽度
回答by CloudMagick
You can adjust the width of the popover, but the best thing to do is to define the width of the content before Bootstrap sees is. For instance, I had a table, I defined it's width, then bootstrap built a popover to suit it. (Sometimes Bootstrap has trouble determining the width, and you need to step in and hold its hand)
你可以调整popover的宽度，但最好的办法是在Bootstrap看到之前定义内容的宽度。例如，我有一张桌子，我定义了它的宽度，然后引导程序构建了一个适合它的弹出框。（有时 Bootstrap 无法确定宽度，您需要介入并握住它的手）
回答by Xavier13
I might have an easier solution:
我可能有一个更简单的解决方案：
Add the following css class:
添加以下css 类：
.app-popover-fw { width: 276px; }
.app-popover-fw { width: 276px; }
Use the following templatefor your popover
为您的弹出框使用以下模板
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 });`
Working fiddle: http://jsfiddle.net/b5Ly2ynd/
工作小提琴：http: //jsfiddle.net/b5Ly2ynd/
NB: As others said, there is a "max-width" property on bs popovers. You need to alter this one if you want your popover larger than 276px.
注意：正如其他人所说，bs 弹出窗口有一个“最大宽度”属性。如果您希望弹出框大于 276 像素，则需要更改此设置。
回答by Bimal Das
Use this code . It will work fine:
使用此代码。它会正常工作：
.popover{
background-color:#b94a48;
border:none;
border-radius:unset;
min-width:100px;
width:100%;
max-width:400px;
overflow-wrap:break-word;
}
回答by Marcin
Another option is to use custom template like (added only additional class: popover-lg):
另一种选择是使用自定义模板（仅添加附加类：popover-lg）：
<div class="popover popover-lg" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>
Then in css:
然后在css中：
.popover-lg {
max-width: 100%;
}
Invocation:
调用：
$(".your-element")..popover({
trigger: "hover",
template: templateString,
container: "body",
content: '...',
});
This way it is clean and doesn't interfere original bootstrap behavior.
这样它是干净的并且不会干扰原始引导行为。
回答by superlogical
I used the following code:
我使用了以下代码：
.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;
}
回答by Asiri Jayaweera
You can use CSS to increase the width of your popover.
您可以使用 CSS 来增加弹出框的宽度。
.popover{
max-width: 100%; /* Max Width of the popover (depending on the container!) */
}
回答by iGanja
The best method I have found to affect the popover properties without directly overriding them in a CSS override class, is to use the container attribute when instantiating the popover, then using a complex selector to override the properties, thereby keeping the original properties for any other popovers you may want in some other area of your site.
我发现在不直接在 CSS 覆盖类中覆盖它们的情况下影响弹出窗口属性的最佳方法是在实例化弹出窗口时使用容器属性，然后使用复杂的选择器覆盖属性，从而为任何其他对象保留原始属性您可能需要在您网站的其他区域使用弹出框。
Simply overriding max-width in the .popover will work of course, but then you have to live with that override for everything, essentially defeating the purpose.
简单地覆盖 .popover 中的 max-width 当然会起作用，但是你必须忍受所有事情的覆盖，基本上违背了目的。
What I do is set the container of my popover to the container of the triggering element, then creating a complex CSS class like .container > .popover that sets the max-width the popover only for that instance.
我所做的是将弹出框的容器设置为触发元素的容器，然后创建一个复杂的 CSS 类，如 .container > .popover ，该类仅为该实例设置弹出框的最大宽度。
