popover的內存彈出寬度

Question

我想讓Bootstrap Popover更寬一些。我讀到這應該工作：

.popover-inner a { 
    width: 600px; 
} 

但是，瀏覽器控制檯仍顯示自動與上述代碼。很難形容。這裏是一個快照者：根據我在我的bootstrap.css文件

Answer 1

，默認是最大寬度屬性。

我用這個

.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; 
} 

和它的作品，你究竟是如何打算。

我bootstrap.css文件不包含酥料餅，內CSS選擇器都不過

Answer 2

有上引導一個pull request使它更容易些，但你設置的酥料餅的template選項可以modify it using this technique：

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

然後你可以設置你的酥料餅special-class CSS但是你喜歡（寬度和更多！）

Answer 3

下面是我用一個樣本初始化。

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

如您所見，它使用自定義模板。該模板使用定製的popover-medium類。

然後我有一個CSS選擇器

.popover-medium { 
    max-width: 350px; 
} 

你也可以只設置樣式的模板類，如果你想要的。

Answer 4

如果你想控制你的酥料餅窗口的最小寬度，只需添加在CSS這樣一個額外的行（或額外的CSS）：

.popover 
{ 
    min-width: 200px ! important; 
} 

（與所需的值替換200像素）

Answer 5

.popover { 
    max-width: 600px; 
    width: auto; 
} 

變化最大寬度到您的期望值，您還可以設置min-width，如果你想

Answer 6

... 
width:auto; 
... 

在我的情況下，

是完美的解決方案。我在同一頁面上有多個彈出窗口，其中一個有很長的URL。他們現在都很好看。謝謝JFK！

Answer 7

1）簡單的方法：（警告：這會影響所有popovers）：

只需重寫引導。酥料餅的樣式如下

.popover{ 
    max-width: 600px; 
} 

2）推薦的方法：

$("#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">' 
     +'<div class="arrow"></div><h3 class="popover-title"></h3>' 
     +'<div class="popover-content"></div>' 
     +'</div>' 
}); 

首先添加自定義類，像上面我的定製級的酥料餅的模板。請注意，彈出窗口將使用默認模板呈現，除非您指定了自定義模板。

然後重寫引導的.popover風格象下面這樣：

div.popover.my-custom-class{ 
    max-width: 600px; 
} 

這種風格讓你有一個動態的寬度可達600像素。如果您需要爲彈出窗口設置最小寬度，請直接設置寬度選項。見下面的例子，

div.popover.my-custom-class{ 
    min-width: 600px; 
} 

當你增加寬度，你可能需要調整酥料餅盒和左/右頁邊界之間的空間（偏移）。查看視口屬性，因爲它設置了邊界。

Answer 8

這裏的一些答案建議只讓popover類具有一定的寬度。這不好，因爲它會影響所有的彈出。使用這樣的事情相反，一些更有針對性：

.container-div .popover { 
    /* add styles here */ 
} 

Answer 9

禁用max-width在.popover：

.popover { 
    max-width: none; 
} 

然後你就可以與內容的大小更自由地發揮。

Answer 10

添加您的酥料餅的內容HTML用自己的類，然後在CSS文件中加入：

.popover .own-class { width: ... } 

「.own級」元素的寬度將決定酥料餅的寬度。