popover-inner 용 부트 스트랩 popover 너비

Question

부트 스트랩 Popover가 더 넓어지기를 바랍니다. 나는 이것이 작동해야한다고 읽었다 :

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

그러나, 브라우저 콘솔은 여전히 ​​위의 코드로 자동을 보여준다. 설명하기 어렵다. 여기에 스냅 샷은 다음과 같습니다

Answer 1

내 bootstrap.css 파일이 무엇을 기반으로, 기본값은 최대 폭 속성입니다.

나는이

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

사용하고 당신이 그것을 의도 정확히 어떻게 작동합니다.

내 bootstrap.css 파일

는

Answer 2

이 쉽게하기 위해 부트 스트랩에 pull request을 거기에 전혀하지만 팝 오버 - 내부 CSS를 선택기를 포함하지만, 할 수 있습니다 modify it using this technique 팝 오버에 대한 template 옵션을 설정하지 않습니다

를

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

그럼 당신은 그러나 당신이 좋아하는 당신의 팝 오버 special-class CSS를 설정할 수 있습니다 (폭과 이상!)

Answer 3

여기 내가 사용하는 샘플 초기화합니다.

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

보시다시피 맞춤 템플릿이 사용됩니다. 템플릿은 사용자 정의 popover-medium 클래스를 사용합니다.

나는 다음 CSS 선택기 당신이 원하는 경우에 당신은 또한 단지 템플릿 클래스에 스타일을 설정할 수

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

있습니다.

Answer 4

당신이 당신의 팝 오버 윈도우의 최소 폭을 제어하려면, 그냥이 같은 CSS의에서 추가 라인 (또는 추가 CSS) 추가 :

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

가 (원하는 값으로 200 픽셀을 대체)

를

Answer 5

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

는 원하는 값으로

변화의 최대 폭은, 당신은 또한 당신이 원하는 경우, min-width을 설정할 수 있습니다

Answer 6

... 
width:auto; 
... 

내 경우에는

이 완벽한 솔루션이었습니다. 같은 페이지에서 여러 번의 팝업이 있었는데 그 중 하나에 긴 URL이 있습니다. 그들 모두는 이제 좋아 보인다. JFK에 감사드립니다!

Answer 7

1) 쉬운 방법 : (경고 :이) 모든 popovers에 영향을 미칠 것입니다 :

그냥 부트 스트랩보다 우선합니다.

.popover{ 
    max-width: 600px; 
} 

2) 추천 방법은 아래와 같이 팝 오버 스타일 :

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

먼저 내 - 사용자 지정 수준의 위 같은 팝 오버 템플릿에 사용자 정의 클래스를 추가 할 수 있습니다. 사용자 정의 템플리트를 지정하지 않으면 popover는 기본 템플리트를 사용하여 렌더링됩니다.

그런 다음 아래와 같이 부트 스트랩의 .popover 스타일을 오버라이드 (override) :

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

이 스타일은 600PX까지 동적 폭을 갖도록하자. popover에 최소 너비를 설정해야한다면 width 옵션을 직접 설정하십시오. 당신이 폭이 증가 할 때, 당신은 팝 오버 상자와 왼쪽/오른쪽 페이지 테두리 사이의 공간 (오프셋)을 조정해야 할 수도 있습니다, 아래의 예를

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

를 참조하십시오. 범위를 설정함에 따라 viewport 속성을 참조하십시오.

Answer 8

여기에 일부 대답은 popover 클래스를 특정 너비로 ​​지정하는 것이 좋습니다. 이것은 모든 popovers에 영향을주기 때문에 좋지 않습니다.

max-width 안

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

Answer 9

.popover에 :

.popover { 
    max-width: none; 
} 

을 그리고 당신은 더 자유롭게 컨텐츠의 크기에 재생할 수있는이 대신, 뭔가 더 목표 같은 것을 사용합니다.

Answer 10

는 CSS 파일 추가에 다음 자신의 클래스와 HTML 같은 팝 오버의 콘텐츠를 추가하고 :

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

".own 수준"요소의 폭은 팝 오버 폭을 결정합니다.