CSS 更改 Bootstrap 弹出框的宽度

Changing the width of Bootstrap popover

提问by mayankbatra

I am designing a page using Bootstrap 3. I am trying to use a popover with placement: righton an input element. The new Bootstrap ensures that if you use form-controlyou basically have a full-width input element.

我正在使用 Bootstrap 3 设计页面。我正在尝试placement: right在输入元素上使用弹出框。新的 Bootstrap 确保如果你使用form-control你基本上有一个全角输入元素。

The HTML code looks something like this:

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>

The popovers width is too low, in my opinion because their isn't any width left in the div. I want the input form on the left side, and a wide popover on the right side.

弹出窗口的宽度太低，在我看来，因为它们在 div 中没有任何宽度。我想要左侧的输入表单，右侧的宽弹出框。

Mostly, I'm looking for a solution where I don't have to override Bootstrap.

大多数情况下，我正在寻找一种无需覆盖 Bootstrap 的解决方案。

The attached JsFiddle. The second input option. Haven't used jsfiddle a lot so don't know, but try increasing the size of the output box to see results, on smaller screens wouldn't even see it. http://jsfiddle.net/Rqx8T/

附加的 JsFiddle。第二个输入选项。没有经常使用jsfiddle所以不知道，但是尝试增加输出框的大小以查看结果，在较小的屏幕上甚至看不到它。 http://jsfiddle.net/Rqx8T/

采纳答案by mayankbatra

<div class="row" data-toggle="popover" data-trigger="hover" 
                 data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
    <label for="name">Name:</label>
    <input id="name" class="form-control" type="text" />
</div>
</div>

Basically i put the popover code in the row div, instead of the input div. Solved the problem.

基本上我将弹出代码放在行 div 中，而不是输入 div 中。解决了问题。

回答by Anil

Increase width with CSS

使用 CSS 增加宽度

You can use CSS to increase the width of your popover, like so:

您可以使用 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!) */
}

If this doesn't work, you probably want the solution below and alter your containerelement. (View the JSFiddle)

如果这不起作用，您可能需要下面的解决方案并更改您的container元素。（查看 JSFiddle）

---

---

Twitter bootstrap Container

Twitter 引导容器

If that doesn't work, you probably need to specify the container:

如果这不起作用，您可能需要指定容器：

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

---

---

More Info

更多信息

The popover is contained within the element that it is triggered in. In order to extend it "full width" - specify the container:

弹出框包含在触发它的元素中。为了扩展它“全宽” - 指定容器：

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

---

---

JSFiddle

JSFiddle

View the JSFiddle to try it out.

查看 JSFiddle 来尝试一下。

JSFiddle: http://jsfiddle.net/xp1369g4/

JSFiddle：http://jsfiddle.net/xp1369g4/

回答by 2called-chaos

I also needed a wider popover for a search text field. I came up with this Javascript solution (here in Coffee):

我还需要一个更宽的弹出框用于搜索文本字段。我想出了这个 Javascript 解决方案（在Coffee 中）：

$(".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"))

The workaround is in the last line. Before the popover is being displayed the max-width option is set to a custom value. You could also add a custom class to the tip element.

解决方法在最后一行。在显示弹出框之前，max-width 选项设置为自定义值。您还可以向 tip 元素添加自定义类。

回答by Aleksey Shafransky

I had the same problem. Spent quite some time searching for an answer and found my own solution: Add following text to the head:

我有同样的问题。花了很多时间寻找答案并找到了我自己的解决方案：将以下文本添加到头部：

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>

回答by BENARD Patrick

To change width you can use css

要更改宽度，您可以使用 css

For fixed size wanted

对于想要的固定尺寸

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

For max width wanted:

对于想要的最大宽度：

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

jsfiddle: http://jsfiddle.net/Rqx8T/2/

jsfiddle：http: //jsfiddle.net/Rqx8T/2/

回答by tyczo

To change the popover width you may override the template:

要更改弹出框宽度，您可以覆盖模板：

$('#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>'
})

回答by ajitweb

With the help of what @EML has described above regarding popover on modal windows and also the code shown by @2called-chaos, this is how I solved the problem.

借助@EML 上面描述的有关模态窗口上的弹出窗口以及@2called-chaos 显示的代码，这就是我解决问题的方法。

I have a icon on the modal which when clicked should the popup

我在模态上有一个图标，点击它时应该弹出

My HTML

我的 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>

My Script

我的脚本

    $('[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"); });

回答by Dirceu

For people who prefer the JavaScript solution. In Bootstrap 4tip() became getTipElement() and it returns a no jQuery object. So in order to change the width of the popover in Bootstrap 4 you can use:

对于喜欢 JavaScript 解决方案的人。在Bootstrap 4 中，tip() 变成了 getTipElement() 并且它返回一个无 jQuery 对象。因此，为了在 Bootstrap 4 中更改弹出框的宽度，您可以使用：

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});

回答by tanguy_k

No final solution here :/ Just some thoughts how to "cleanly" solve this problem...

这里没有最终解决方案：/只是一些想法如何“干净地”解决这个问题......

Updated version (jQuery 1.11 + Bootstrap 3.1.1 + class="col-xs-" instead of class="col-md-") of your original JSFiddle: http://jsfiddle.net/tkrotoff/N99h7/

原始 JSFiddle 的更新版本（jQuery 1.11 + Bootstrap 3.1.1 + class="col-xs-" 而不是 class="col-md-"）：http: //jsfiddle.net/tkrotoff/N99h7/

Now the same JSFiddle with your proposed solution: http://jsfiddle.net/tkrotoff/N99h7/8/
It does not work: the popover is positioned relative to the <div class="col-*">+ imagine you have multiple inputs for the same <div class="col-*">...

现在与您提出的解决方案相同的 JSFiddle ：http: //jsfiddle.net/tkrotoff/N99h7/8/
它不起作用：popover 的位置相对于<div class="col-*">+ 想象您有多个输入相同<div class="col-*">......

So if we want to keep the popover on the inputs (semantically better):

因此，如果我们想在输入上保留弹出窗口（语义上更好）：

• .popover { position: fixed; }: but then each time you scroll the page, the popover will not follow the scroll
• .popover { width: 100%; }: not that good since you still depend on the parent width (i.e <div class="col-*">
• .popover-content { white-space: nowrap; }: good only if the text inside the popover is shorter than max-width

• .popover { position: fixed; }: 但是每次滚动页面时，popover 不会跟随滚动
• .popover { width: 100%; }：不是很好，因为你仍然依赖于父宽度（即 <div class="col-*">
• .popover-content { white-space: nowrap; }: 只有当弹出框内的文本短于 max-width

See http://jsfiddle.net/tkrotoff/N99h7/11/

见http://jsfiddle.net/tkrotoff/N99h7/11/

Maybe, using very recent browsers, the new CSS width valuescan solve the problem, I didn't try.

也许，使用最新的浏览器，新的 CSS 宽度值可以解决问题，我没有尝试。

回答by EML

container: 'body'normally does the trick (see JustAnil's answer above), but there's a problem if your popover is in a modal. The z-indexplaces it behindthe modal when the popover's attached to body. This seems to be related to BS2 issue 5014, but I'm getting it on 3.1.1. You're not meant to use a containerof body, but if you fix the code to

container: 'body'通常可以解决问题（请参阅上面 JustAnil 的回答），但是如果您的弹出框处于模态，则会出现问题。该z-index地方它背后的模式时，酥料饼附加到body。这似乎与BS2 issue 5014 有关，但我在 3.1.1 上得到它。您不打算使用 a containerof body，但是如果您将代码修复为

   $('#fubar').popover({
   trigger : 'hover',
   html    : true,
   dataContainer : '.modal-body',
   ...etc });

then you fix the z-indexproblem, but the popover width is still wrong.

然后你解决了这个z-index问题，但是popover的宽度仍然是错误的。

The only fix I can find is to use container: 'body'and to add some extra css:

我能找到的唯一解决方法是使用container: 'body'并添加一些额外的 css：

.popover { 
  max-width : 400px;
  z-index   : 1060;
}

Note that css solutions by themselves won't work.

请注意，css 解决方案本身不起作用。