我正在使用Bootstrap 3設計一個頁面。我正在嘗試使用一個帶有placement: right的popover在一個輸入元素上。新的Bootstrap確保如果你使用表單控件，你基本上有一個全幅輸入元素。
HTML代碼看起來像這樣:
<div class="row">
<div class="col-md-6">
<label for="name">Name:</label>
<input id="name" class="form-control" type="text"
data-toggle="popover" data-trigger="hover"
data-content="My popover content.My popover content.My popover content.My popover content." />
</div>
</div>在我看來，popovers的寬度太低了，因為它們在div中沒有留下任何寬度。 我希望輸入表單在左邊，一個寬彈出窗口在右邊。
最重要的是，我在尋找一個不需要覆蓋Bootstrap的解決方案。
附上的JsFiddle。第二個輸入選項。沒怎么用過jsfiddle，所以不知道，但是試著增加輸出框的大小來看結果，在小屏幕上看不到。 http://jsfiddle.net/Rqx8T/
您可以使用CSS來增加彈出窗口的寬度，如下所示:
/* The max width is dependant on the container (more info below) */
.popover{
max-width: 100%; /* Max Width of the popover (depending on the container!) */
}如果這不起作用，您可能需要下面的解決方案并改變您的容器元素。(查看JSFiddle)
Twitter引導容器 如果這不起作用，您可能需要指定容器:
// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
container: 'body'
});更多信息
popover包含在它被觸發的元素中。為了延長它& quot全幅& quot-指定容器:
// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
container: 'body'
});JSFiddle 查看JSFiddle來嘗試一下。
http://jsfiddle.net/xp1369g4/ 我也有同樣的問題。我花了很長時間尋找答案，并找到了自己的解決方案: 在標題中增加以下內容:
<style type="text/css">
.popover{
max-width:600px;
}
</style>我還需要一個更寬的搜索文本字段彈出窗口。我想到了這個Javascript解決方案(這里是咖啡):
$(".product-search-trigger")
.click(-> false) # cancel click on <a> tag
.popover
container: "body"
html: true
placement: "left"
title: "<strong>Product search</strong> enter number or name"
.on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))解決方法在最后一行。在彈出窗口顯示之前，最大寬度選項被設置為自定義值。您還可以向tip元素添加一個自定義類。
要改變寬度，你可以使用css
招聘固定尺寸的
.popover{
width:200px;
height:250px;
}對于所需的最大寬度:
.popover{
max-width:200px;
height:250px;
}http://jsfiddle.net/Rqx8T/2/
要更改彈出窗口的寬度，您可以覆蓋模板:
$('#name').popover({
template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
})對于喜歡JavaScript解決方案的人來說。 在Bootstrap 4中，tip()變成了getTipElement()，它返回一個no jQuery對象。因此，為了在Bootstrap 4中更改彈出窗口的寬度，您可以使用:
}).on("show.bs.popover", function() {
$($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});借助@EML在上面描述的關于模態窗口的popover和@ 2顯示的代碼——chaos，這是我如何解決這個問題的。
我在模式上有一個圖標，點擊時應該彈出
我的HTML
<i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line<br />B - Second line - Long line <br />C - Third Line - Long Long Long Line"></i>我的劇本
$('[rel=popover]').popover({
placement: 'bottom',
html: 'true',
container: '#name-of-modal-window .modal-body'
}).on("show.bs.popover", function () {
$(this).data("bs.popover").tip().css("max-width", "600px"); });基本上，我將popover代碼放在行div中，而不是輸入div中。解決了問題。
您可以在popover中使用屬性data-container="body "
<i class="fa fa-info-circle" data-container="body" data-toggle="popover"
data-placement="right" data-trigger="hover" title="Title"
data-content="Your content"></i>下面是使用hover的非coffeescript方法:
$(".product-search-trigger").popover({
trigger: "hover",
container: "body",
html: true,
placement: "left"
}).on("show.bs.popover", function() {
return $(this).data("bs.popover").tip().css({
maxWidth: "300px"
});
});
});這里沒有最終的解決方案:/只是一些如何“干凈地”解決這個問題的想法...
原始js fiddle:http://jsfiddle.net/tkrotoff/N99h7/的更新版本(jQuery 1.11+Bootstrap 3 . 1 . 1+class = " col-xs-"，而不是class="col-md-")
現在同一個js撥弄你提出的解決方案:http://jsfiddle.net/tkrotoff/N99h7/8/ 它不起作用:彈出框是相對于& ltdiv class="col-*">。+假設您有多個相同的輸入& ltdiv class="col-*">。...
因此，如果我們想在輸入上保留popover(語義上更好):
。popover {位置:固定；}:但是每次滾動頁面時，彈出窗口都不會跟隨滾動 。popover {寬度:100%；}:不太好，因為您仍然依賴于父寬度(即& ltdiv class="col-*">。 。popover-content {空白:nowrap}:僅當彈出窗口內的文本短于max-width時才有效 參見http://jsfiddle.net/tkrotoff/N99h7/11/
也許，使用非常新的瀏覽器，新的CSS寬度值可以解決問題，我沒有嘗試。
容器:“body”通常可以做到這一點(見上面JustAnil的回答)，但是如果你的popover是模態的，就有問題了。當popover附加到body時，z-index將它放在modal的后面。這似乎與BS2問題5014有關，但我是在3.1.1得到它的。您不應該使用body的容器，但是如果您將代碼固定為
$('#fubar').popover({
trigger : 'hover',
html : true,
dataContainer : '.modal-body',
...etc });然后您修復了z-index問題，但是popover寬度仍然是錯誤的。
我能找到的唯一解決辦法是使用容器:“body”并添加一些額外的css:
.popover {
max-width : 400px;
z-index : 1060;
}注意css解決方案本身是行不通的。
Bootstrap 4 beta的一個測試解決方案:
.popover {
min-width: 30em !important;
}與jQuery語句一起:
$('[data-toggle="popover"]').popover({
container: 'body',
trigger: 'focus',
html: true,
placement: 'top'
})旁注，在HTML中或作為popover({})對象的一個選項的data-container="body "或container: "body "并沒有真正做到這一點[也許可以，但只能與CSS語句一起使用]；
此外，請記住Bootstrap 4 beta依賴popper.js進行彈出和工具提示定位(在此之前是tether.js)
您可以用上面提到的方法調整彈出窗口的寬度，但是最好的方法是在Bootstrap看到并計算之前定義內容的寬度。例如，我有一個表格，我定義了它的寬度，然后bootstrap構建了一個popover來適應它。(有時Bootstrap無法確定寬度，您需要介入并握住它的手)
我用這個(工作正常) :
.popover{
background-color:#b94a48;
border:none;
border-radius:unset;
min-width:100px;
width:100%;
max-width:400px;
overflow-wrap:break-word;
}最后，我將div“popover-content”寬度設置為我想要的數字。(其他id 不然上課就不行了.....)祝你好運！
#popover-content{
width: 600px;
}您可以更改彈出式菜單的模板。使用數據模板屬性或設置它的函數中的相關部分:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<span class="text-green" data-toggle="popover" data-placement="right" data-template="<div class="popover fade top in" style="max-width:none;" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>" data-trigger="manual" data-original-title="Some Title" data-content="<div>Some really long text and stuff. Some really long text and stuff. Some really long text and stuff. Some really long text and stuff.</div>" data-html="true" onclick="$(this).popover('show');">clickme</span>
</body>
</html>在Bootstrap 4上，您可以通過覆蓋最大寬度來輕松查看模板選項:
$('#myButton').popover({
placement: 'bottom',
html: true,
trigger: 'click',
template: '<div class="popover" style="max-width: 500px;" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});如果頁面上有幾個popovers，這是一個很好的解決方案。
當我想改變特定彈出窗口的寬度時，我為Bootstrap 5+找到了這個解決方案。添加自定義類對我有效:
Html:
<button class="btn btn-outline-secondary" id="popover-help" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
<i class="fa fa-question-circle"></i>
</button>
<div id="popover-help-container" style="display: none;">
<h4 style="text-align: left;"> How to:</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum ultricies elit, mattis egestas nisl suscipit ac. Duis ipsum augue, convallis sed nunc in, pellentesque luctus elit. Duis porttitor massa sed finibus rutrum. Nunc eu risus ultrices, volutpat leo eget, pulvinar eros. Donec rhoncus mattis sem, ac iaculis turpis semper non. Cras dapibus tristique risus, eu tincidunt elit condimentum fermentum. Nunc at dignissim ante, nec efficitur felis. Duis mauris magna, fermentum eu egestas vel, vehicula at est. Nullam dapibus nisi non purus pellentesque ultrices. Nulla pulvinar neque quis ipsum semper, a congue tortor aliquet. Suspendisse vulputate porttitor feugiat. Maecenas pretium porta mauris feugiat pellentesque. Integer tempus risus eu pretium consectetur.
Donec interdum, eros ac imperdiet pretium, magna risus laoreet tellus, in finibus justo sapien et lacus. Pellentesque placerat ligula at metus sollicitudin, et convallis nisi luctus. Vivamus non arcu vel ex pharetra auctor. Morbi efficitur sed turpis id finibus. Sed porttitor luctus quam sed laoreet. Nunc facilisis finibus aliquet. Maecenas pellentesque sem dui, sed blandit tortor placerat ut. Donec tempor ipsum in sem fermentum, vel vulputate magna egestas.</p>
</div>JS:
<script type="text/javascript">
var popoverTriggerList = [].slice.call(document.querySelectorAll('[id="popover-help"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl,{
content: function() {
return $('#popover-help-container').html();
},
html: true,
placement: 'bottom',
sanitize: false,
customClass: 'popover-large'
});
})
</script>css:
.popover-large {
max-width: 50%; /* Max Width of the popover (depending on the container!) */
}對于typescript組件:
@Component({
selector: "your-component",
templateUrl: "your-template.component.html",
styles: [`
:host >>> .popover {
max-width: 100%;
}
`]
})在Angular ng-bootstrap中，您可以簡單地將container="body "設置為觸發popover的控件(如按鈕或文本框)。然后在全局樣式文件(style.css或style.scss)中，您必須添加。popover {最大寬度:100%！重要；}.之后，彈出窗口的內容將自動設置為其內容寬度。
在bootstrap 4中，您可以簡單地覆蓋styles.scss文件中引導變量$popover-max-width的默認值，如下所示:
$popover-max-width: 300px;
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/popover";有關覆蓋bootstrap 4默認值的更多信息https://get bootstrap . com/docs/4.0/getting-started/theming/# variable-defaults
您還可以添加數據容器= & quotbody & quot哪個可以完成這項工作:
<div class="row">
<div class="col-md-6">
<label for="name">Name:</label>
<input id="name" class="form-control" type="text"
data-toggle="popover" data-trigger="hover"
data-container="body"
data-content="My popover content.My popover content.My popover content.My popover content." />
</div>
</div>這對我很有效& quot角度14 & quot
試試這個:
var popover_size=($('.popover').css('width'));
var string=(popover_size).split('px');
alert("string"+string);
popover_size = ((parseInt(string[0])+350));
alert("ps"+popover_size);
$('.popover').css('width',parseInt(popover_size));