UI 부트스트랩 팝업: 너비 변경

UI 부트스트랩 팝업: 너비 변경

각진 UI 부트스트랩의 팝업을 사용하려고 합니다.JS: http://angular-ui.github.io/bootstrap/ #/팝오버

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

이런 느낌이 듭니다.

이 팝오버의 너비를 어떻게 변경할 수 있습니까?

사용할 수 있는 문서는

popover-classattribute - 팝업에 적용할 사용자 지정 클래스

<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부트스트랩이popover-max-width276 px로 정했습니다.

깃허브 부트스트랩 코드

팝업 콘텐츠 클래스를 재정의하여 이를 달성할 수 있습니다.

.popover-content {
width: 200px;
}

업데이트: Chrome에서 확인할 수 있습니다: - F12 누름 - 확대기 선택 - 검사할 요소 클릭 - 스타일 수정

당신이 매우 넓은 팝오버를 가지고 있다면 다른 해결책은 그것들이 자동 크기가 되도록 허용하는 것입니다.

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

나에게는 다음과 같은 일을 했습니다.

.popover {
    max-width: 450px;
}

이것은 실제로 팝오버 화이트 컨테이너의 크기를 바꿨습니다.

팝오버 구성요소의 popover-append-to-body 속성을 사용해 보셨나요?

폭은 다음 값을 재정의하여 쉽게 변경할 수 있습니다..popover:

.popover {
    width: 200px;
}

<style>
    .popover {
        width: 500px;
        max-width: 500px;
    }
</style>

제 경우에는 두 매개 변수가 모두 중요하고 효과가 있었습니다.

언급URL : https://stackoverflow.com/questions/29005345/ui-bootstrap-popover-change-width