UI Bootstrap Popover: изменить ширину

Ответ 1

Вы можете добиться этого, переопределив класс popover-content:

.popover-content {
width: 200px;
}

UPDATE: Вы можете проверить это в Chrome: - нажмите F12 - выберите лупу - нажмите на элемент для проверки - изменить свой стиль

Ответ 2

В docs вы можете использовать

popover-class атрибут - Пользовательский класс, который будет применяться к popover

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

В таблице стилей

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

Причиной установки max-width вместо width является то, что bootstrap имеет popover-max-width, установленный как 276px.

github bootstrap code

Ответ 3

Другое решение, если у вас очень широкие всплывающие окна, позволяет им авторизовать

Просто установите ваш css таким образом

.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 */
}

Ответ 4

Для меня следующие работы

.popover {
    max-width: 450px;
}

Это фактически изменило размер белого контейнера popover.

Ответ 5

Вы попробовали атрибут popover-append-to-body компонента popover?

Ответ 6

Ширину можно легко изменить, переопределив .popover:

.popover {
    width: 200px;
}