UI Bootstrap Popover: thay đổi chiều rộng

Question

Tôi đang cố gắng sử dụng popovers từ UI Bootstrap trong AngularJS: http://angular-ui.github.io/bootstrap/#/popover

<i class="fa fa-question-circle" popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta libero tincidunt, malesuada tellus vitae, dapibus ex. Ut tristique tristique eros." popover-trigger="mouseenter" popover-placement="right"></i> 

Nó mang lại cho tôi một popover như thế này:

thế nào thế nào tôi có thể thay đổi phong cách chiều rộng của cửa sổ bật lên này?

Answer 1

Bạn có thể đạt được điều đó bằng cách ghi đè lớp popover-content:

.popover-content { 
width: 200px; 
} 

UPDATE: Bạn có thể kiểm tra điều này trong Chrome: - nhấn F12 - chọn kính lúp - click vào yếu tố để kiểm tra - sửa đổi kiểu của nó

Answer 2

Chiều rộng có thể thay đổi dễ dàng bằng cách ghi đè .popover:

.popover { 
    width: 200px; 
} 

Answer 3

Bạn thử popover-append-to-cơ thuộc tính của các thành phần popover?

Answer 4

Đối với tôi những điều sau đây làm việc

.popover { 
    max-width: 450px; 
} 

Điều này thực sự làm thay đổi kích thước của container trắng popover.

Answer 5

Một giải pháp nếu bạn có popovers rất rộng là để cho phép họ AutoSize

Chỉ cần thiết lập css của bạn sẽ được như thế này

.popover { 
    max-width: 800px; /* optional max width */ 
    width: intrinsic; /* Safari/WebKit uses a non-standard name */ 
    width: -moz-max-content; /* Firefox/Gecko */ 
    width: -webkit-max-content; /* Chrome */ 
} 

Answer 6

Từ docs bạn có thể sử dụng

popover-class thuộc tính - Lớp tùy chỉnh được áp dụng cho cửa sổ bật lên

<i class="fa fa-question-circle" popover-class="increase-popover-width" popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta libero tincidunt, malesuada tellus vitae, dapibus ex. Ut tristique tristique eros." popover-trigger="mouseenter" popover-placement="right"></i> 

Trong tấm phong cách của bạn

.increase-popover-width { 
    max-width: 400px; 
} 

Lý do cho việc thiết max-width thay vì width là bootstrap có popover-max-width bộ như 276px.

github bootstrap code