blocks|key|1079793|text|根据我的bootstrap.css文件中的内容，默认值是最大宽度属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1079794|我用这个|1079795|.popover+{
++position:+absolute;
++top:+0;
++left:+0;
++z-index:+1010;
++display:+none;
++max-width:+600px;
++padding:+1px;
++text-align:+left;
++white-space:+normal;
++background-color:+#ffffff;
++border:+1px+solid+#ccc;
++border:+1px+solid+rgba(0,+0,+0,+0.2);
++-webkit-border-radius:+6px;
+++++-moz-border-radius:+6px;
++++++++++border-radius:+6px;
++-webkit-box-shadow:+0+5px+10px+rgba(0,+0,+0,+0.2);
+++++-moz-box-shadow:+0+5px+10px+rgba(0,+0,+0,+0.2);
++++++++++box-shadow:+0+5px+10px+rgba(0,+0,+0,+0.2);
++-webkit-background-clip:+padding-box;
+++++-moz-background-clip:+padding;
++++++++++background-clip:+padding-box;
}|code-block|syntax|javascript|1079796|它完全按照你想要的方式工作。|1079797|我的bootstrap.css文件在css选择器中根本不包含弹出窗口。|1079798|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Based off of what I have in my bootstrap.css file, the default is a max-width property.</p>

<p>I use this</p>

<pre><code>.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  max-width: 600px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}
</code></pre>

<p>and it works exactly how you intended it to.</p>

<p>My bootstrap.css files does not contain a popover-inner a css selector at all though</p>


blocks|key|1079826|text|bootstrap上有一个pull+request可以让这变得更容易，但是你可以通过modify+it+using+this+technique来设置弹出窗口的template选项：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1079827|$('#yourPopover').popover({
++template:+'<div+class="popover+special-class"><div+class="arrow"></div><div+class="popover-inner"><h3+class="popover-title"></h3><div+class="popover-content"><p></p></div></div></div>'
})|code-block|syntax|javascript|1079828|然后你可以随心所欲地设置你的popover+special-class+css+(宽度等等！)|1079829|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twbs/bootstrap/pull/2332|1|https://github.com/twbs/bootstrap/pull/2332#issuecomment-10132668^0|28|8|D|C|0|16|U|1|0|0|M|D|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]|$9|12|A|13|1|14]]|E|$]]|$1|F|3|G|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

<p>There's a <a href="https://github.com/twbs/bootstrap/pull/2332" rel="noreferrer">pull request</a> on bootstrap to make this easier, but you can <a href="https://github.com/twbs/bootstrap/pull/2332#issuecomment-10132668" rel="noreferrer">modify it using this technique</a> of setting the <code>template</code> option for the popover:</p>

<pre><code>$('#yourPopover').popover({
  template: '&lt;div class="popover special-class"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;div class="popover-inner"&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
})
</code></pre>

<p>Then you can set your popover <code>special-class</code> css however you like (widths and more!)</p>


blocks|key|1075582|text|.popover+{
++max-width:+600px;
++width:+auto;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1075583|将max-width更改为所需的值，如果愿意，还可以设置min-width|unstyled|offset|length|style|CODE|1075584|entityMap^0|0|S|9|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>.popover {
  max-width: 600px;
  width: auto;
}
</code></pre>

<p>change max-width to your desired value, You can also set <code>min-width</code>, if you wish</p>


blocks|key|1079851|text|如果您想控制弹出窗口的最小宽度，只需在css中添加额外的一行(或额外的css)，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1079852|.popover
{
++++min-width:+200px+!+important;
}|code-block|syntax|javascript|1079853|(将200px替换为所需的值)|1079854|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If you want to control the minimum width of your popover window, just add an extra line in the css (or extra css) like this:</p>

<pre><code>.popover
{
    min-width: 200px ! important;
}
</code></pre>

<p>(replace 200px with the desired value)</p>


blocks|key|505643|text|1)简单方法：(警告:这会影响所有的弹出窗口)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|505644|只需覆盖引导程序.popover样式，如下所示|505645|.popover{
++++max-width:+600px;+
}|code-block|syntax|javascript|505646|2)推荐方式：|505647|$("#a-div-id-001").popover({
++++//set+a+custom+container
++++//+which+can+minimize+the+displacement+of+popover
++++//when+window+resizing
++++container:+$("#Div"),
++++html+:+true,
++++content:+function()+{
++++++++return+"<span>Hello+there!</span>";
++++},
++++viewport:+{
++++++++selector:+'body',
++++++++padding:+10
++++},
++++title:"Apps",
++++template:'<div+class="popover+my-custom-class"+role="tooltip">'
++++++++%2B'<div+class="arrow"></div><h3+class="popover-title"></h3>'
++++++++%2B'<div+class="popover-content"></div>'
++++++++%2B'</div>'
});|505648|首先，在popover模板中添加一个自定义类，就像上面的my-+custom+-class一样。请注意，除非您指定了自定义模板，否则将使用默认模板呈现popover。|505649|然后覆盖bootstrap的.popover样式，如下所示：|505650|div.popover.my-custom-class{
++++max-width:+600px;
}|505651|这种样式可以让你拥有高达600px的动态宽度。如果需要设置弹出窗口的最小宽度，只需直接设置宽度选项即可。请参见下面的示例。|505652|div.popover.my-custom-class{
++++min-width:+600px;
}|505653|增加宽度时，可能需要调整弹出框和左/右页面边框之间的间距(偏移量)。请参见viewport属性，因为它设置了边界。|505654|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

<p>1)Easy way :(warning:this will affect all popovers):</p>

<p>Just override the bootstrap .popover styles as below</p>

<pre><code>.popover{
    max-width: 600px; 
}
</code></pre>

<p>2)Recommended  way:</p>

<pre><code>$("#a-div-id-001").popover({
    //set a custom container
    // which can minimize the displacement of popover
    //when window resizing
    container: $("#Div"),
    html : true,
    content: function() {
        return "&lt;span&gt;Hello there!&lt;/span&gt;";
    },
    viewport: {
        selector: 'body',
        padding: 10
    },
    title:"Apps",
    template:'&lt;div class="popover my-custom-class" role="tooltip"&gt;'
        +'&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;'
        +'&lt;div class="popover-content"&gt;&lt;/div&gt;'
        +'&lt;/div&gt;'
});
</code></pre>

<p>First add a custom class to the popover template like above my-custom-class. Note that popover will be rendered in using the default template unless you had specified a custom template.</p>

<p>Then override bootstrap's .popover styles like below :</p>

<pre><code>div.popover.my-custom-class{
    max-width: 600px;
}
</code></pre>

<p>This styles let you to have a dynamic width up to 600px. If you need to set a minimum width to the popover, just set the width option directly. see example below,</p>

<pre><code>div.popover.my-custom-class{
    min-width: 600px;
}
</code></pre>

<p>When you increase the width, you may need to adjust the space (offset) between the popover box and the left/right page border. See the viewport property, as it sets the bounds. </p>


blocks|key|505762|text|在.popover中禁用max-width|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|505763|.popover+{
++++max-width:+none;
}|code-block|syntax|javascript|505764|然后，您可以更自由地处理内容的大小。|505765|entityMap^0|1|8|C|9|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>Disable <code>max-width</code> in <code>.popover</code>:</p>

<pre><code>.popover {
    max-width: none;
}
</code></pre>

<p>And then you can play with the size of the content more freely.</p>


blocks|key|5982251|text|这里的一些答案建议只使popover类具有一定的宽度。这并不好，因为它会影响所有的弹出窗口。使用像这样的东西，更有针对性的东西：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5982252|.container-div+.popover+{
++++/*+add+styles+here+*/
}|code-block|syntax|javascript|5982253|entityMap^0|B|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Some answer herein recommend just making the <code>popover</code> class a certain width. This is no good, because it affects all popovers. Use something like this instead, something more targeted: </p>

<pre><code>.container-div .popover {
    /* add styles here */
}
</code></pre>


blocks|key|505454|text|下面是我使用的一个初始化示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|505455|++++$(".property-price")
++++.popover({+
++++++++++++trigger:+"hover",+
++++++++++++placement:+'bottom',
++++++++++++toggle+:+"popover",
++++++++++++content+:+"The+from+price+is+calculated+ba....the+dates+selected.",
++++++++++++title:+"How+is+the+from+price+calculated?",
++++++++++++container:+'body',
++++++++++++template:+'<div+class="popover+popover-medium"><div+class="arrow"></div><div+class="popover-inner"><h3+class="popover-title"></h3><div+class="popover-content"><p></p></div></div></div>',
++++++++});|code-block|syntax|javascript|505456|正如您所看到的，它使用了一个自定义模板。该模板使用一个自定义的popover-medium类。|505457|然后我就有了一个CSS选择器|505458|.popover-medium+{
++++max-width:+350px;
}|505459|如果你愿意，你也可以在模板类上设置一个样式。|505460|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Here's a sample initialization that I use.</p>

<pre><code>    $(".property-price")
    .popover({ 
            trigger: "hover", 
            placement: 'bottom',
            toggle : "popover",
            content : "The from price is calculated ba....the dates selected.",
            title: "How is the from price calculated?",
            container: 'body',
            template: '&lt;div class="popover popover-medium"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;div class="popover-inner"&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;',
        });
</code></pre>

<p>As you can see, it uses a custom template. The template uses a custom popover-medium class.</p>

<p>I then have a CSS selector</p>

<pre><code>.popover-medium {
    max-width: 350px;
}
</code></pre>

<p>You could also just set a style on the template class if you wanted.</p>


blocks|key|2629991|text|...
width:auto;
...|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2629992|对我来说是完美的解决方案。我在同一个页面上有多个弹出窗口，其中一个有一个很长的URL。它们现在看起来都很漂亮。谢谢你JFK！|unstyled|2629993|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>...
width:auto;
...
</code></pre>

<p>was the perfect solution in my case. I had multiple popovers on the same page and one of them has a long URL. All of them looks nice now. Thank you JFK!</p>


blocks|key|505829|text|将弹出内容作为HTML添加到您自己的类中，然后在CSS文件中添加：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|505830|.popover+.own-class+{+width:+...+}|code-block|syntax|javascript|505831|".own-class“元素宽度将决定popover宽度。|505832|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Add your popover content as HTML with your own class and then in CSS file add:</p>

<pre><code>.popover .own-class { width: ... }
</code></pre>

<p>".own-class" element width will determine popover width.</p>


<p>I would like the have a Bootstrap Popover be wider.  I read that this should work:</p>

<pre><code>.popover-inner a {
   width: 600px;
}
</code></pre>

<p>But, the browser console still shows auto with the above code.  Hard to describe.  Here is a snapshot:</p>

<p><img src="https://i.stack.imgur.com/RMLIb.png" alt="enter image description here"></p>


Bootstrap popover width for popover-inner

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我希望有一个Bootstrap Popover更宽。我读到这应该行得通：.popover-inner a {   width: 600px;}但是，浏览器控制台仍然显示带有上述代码的auto。很难描述。这是一个快照：​​

问popover-inner的自举popover宽度
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问popover-inner的自举popover宽度EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问popover-inner的自举popover宽度
EN