부트스트랩 팝오버 너비를 제어하는 방법: Max-Width, Container 및 JSFiddle 예제
- Mary-Kate Olsen원래의
- 2024-10-27 11:48:01964검색
Bootstrap 팝오버 너비 결정
Bootstrap 3에서 팝오버의 너비는 트리거 요소 내의 사용 가능한 공간에 의해 제한됩니다. 이로 인해 양식 제어 클래스와 같은 넓은 입력 요소를 사용할 때 팝오버가 너무 좁아 보일 수 있습니다.
CSS 너비 수정
팝오버 너비를 늘리는 한 가지 방법은 다음과 같습니다. CSS:
<code class="CSS">.popover{
max-width: 100%; /* Max Width of the popover (depending on the container!) */
}</code>
팝오버의 최대 너비를 컨테이너 내 사용 가능한 공간의 100%로 설정합니다.
컨테이너 사양
CSS 너비 수정이 효과적이지 않은 경우 팝오버에 대한 컨테이너 요소를 지정해야 할 수 있습니다.
<code class="JS">$('[data-toggle="popover"]').popover({
container: 'body'
});</code>
이는 부트스트랩이 트리거 요소가 아닌 본문 요소 내에 팝오버를 포함하도록 지시합니다. 이를 통해 팝오버가 입력 요소 이상으로 확장될 수 있습니다.
컨테이너 관련성
팝오버의 너비는 다음 요소에 의해 결정됩니다.
- 최대 너비: max-width CSS 속성 또는 JavaScript로 정의됩니다.
- 컨테이너 너비: JavaScript 구성에 지정된 컨테이너 요소의 너비입니다.
이 경우 컨테이너 너비는 본문의 100%로 설정되어 팝오버가 화면 전체에 걸쳐 늘어납니다.
JSFiddle 데모
제공된 JSFiddle을 방문하여 실제 예제를 확인하세요.
http://jsfiddle.net/xp1369g4/
팝오버의 최대 너비를 조정하고 컨테이너 요소를 지정하여 , 원하는 팝오버 너비를 얻을 수 있습니다.
위 내용은 부트스트랩 팝오버 너비를 제어하는 방법: Max-Width, Container 및 JSFiddle 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.