Chiều rộng cửa sổ bật lên Bootstrap cho cửa sổ bật lên-bên trong

Question

Tôi muốn có Popst Bootstrap rộng hơn. Tôi đọc rằng điều này sẽ hoạt động:

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

Nhưng bảng điều khiển trình duyệt vẫn hiển thị tự động với mã trên. Khó mô tả. Đây là một bản chụp:

Answer 1

Dựa tắt của những gì tôi có trong tập tin bootstrap.css của tôi, mặc định là một tài sản max-width.

tôi sử dụng này

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

và nó hoạt động chính xác như bạn dự định nó.

file bootstrap.css My không chứa một popover-bên trong một selector css ở tất cả mặc dù

Answer 2

Có một pull request trên bootstrap để làm cho dễ dàng hơn này, nhưng bạn có thể modify it using this technique của thiết lập các tùy chọn template cho popover:

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

Sau đó, bạn có thể thiết lập của bạn popover special-class css tuy nhiên bạn thích (chiều rộng và nhiều hơn nữa!)

Answer 3

Dưới đây là một khởi mẫu mà tôi sử dụng.

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

Như bạn có thể thấy, nó sử dụng mẫu tùy chỉnh. Mẫu sử dụng lớp popover-medium tùy chỉnh.

sau đó tôi có một CSS selector

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

Bạn cũng có thể chỉ cần đặt một phong cách trên lớp mẫu nếu bạn muốn.

Answer 4

Nếu bạn muốn kiểm soát chiều rộng tối thiểu của cửa sổ popover của bạn, chỉ cần thêm một dòng phụ trong css (hoặc thêm css) như thế này:

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

(thay thế 200px với giá trị mong muốn)

Answer 5

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

thay đổi max-width đến giá trị mong muốn của bạn, bạn cũng có thể thiết lập min-width, nếu bạn muốn

Answer 6

... 
width:auto; 
... 

là giải pháp hoàn hảo trong trường hợp của tôi. Tôi đã có nhiều popovers trên cùng một trang và một trong số họ có một URL dài. Bây giờ tất cả chúng đều đẹp. Cảm ơn bạn JFK!

Answer 7

1) Cách dễ dàng: (cảnh báo: điều này sẽ ảnh hưởng đến tất cả popovers):

Chỉ cần ghi đè lên bootstrap.phong cách popover như sau

.popover{ 
    max-width: 600px; 
} 

2) Đề xuất cách:

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

Đầu tiên thêm một lớp tùy chỉnh để mẫu popover như trên my-custom-class. Lưu ý rằng cửa sổ bật lên sẽ được hiển thị bằng cách sử dụng mẫu mặc định trừ khi bạn đã chỉ định mẫu tùy chỉnh.

Sau đó ghi đè lên phong cách .popover bootstrap của như dưới đây:

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

phong cách này cho phép bạn để có một chiều rộng năng động lên đến 600px. Nếu bạn cần đặt chiều rộng tối thiểu cho cửa sổ bật lên, chỉ cần đặt tùy chọn chiều rộng trực tiếp. xem ví dụ bên dưới,

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

Khi bạn tăng chiều rộng, bạn có thể cần phải điều chỉnh khoảng trống (khoảng trống) giữa hộp bật lên và đường viền trang trái/phải. Xem thuộc tính khung nhìn, vì nó đặt các giới hạn.

Answer 8

Một số câu trả lời ở đây khuyên bạn chỉ nên tạo lớp popover với chiều rộng nhất định. Điều này là không tốt, bởi vì nó ảnh hưởng đến tất cả các popovers. Sử dụng một cái gì đó như thế này thay vào đó, một cái gì đó nhắm mục tiêu hơn:

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

Answer 9

Disable max-width trong .popover:

.popover { 
    max-width: none; 
} 

Và sau đó bạn có thể chơi với kích thước của nội dung tự do hơn.

Answer 10

Thêm nội dung popover của bạn dưới dạng HTML với lớp học của riêng bạn và sau đó trong CSS tập tin add:

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

".own-class" width yếu tố sẽ quyết định chiều rộng popover.