Popover szerokość poppers do popover-wewnętrznego

Question

Chciałbym mieć Bootstrap Popover być szerszy. Przeczytałem, że to powinno działać:

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

Ale konsola przeglądarki nadal pokazuje auto z powyższym kodem. Trudno opisać. Oto migawki:

Answer 1

Opierając się od tego, co mam w moim pliku bootstrap.css domyślny jest właściwością max-width.

Używam tego

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

i działa dokładnie tak, jak ma go.

moich bootstrap.css plików nie zawiera popover-wewnętrzna selektor css w ogóle chociaż

Answer 2

Jest pull request na bootstrap aby to łatwiejsze, ale można modify it using this technique ustawiania opcji template dla popover:

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

Następnie można ustawić popover special-class css jednak lubisz (szerokości i więcej!)

Answer 3

Oto próbka inicjalizacji że używam.

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

Jak widać, wykorzystuje niestandardowy szablon. Szablon wykorzystuje niestandardową klasę popover-medium.

Mam następnie selektora CSS

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

Można też po prostu ustawić styl na klasy szablonu, jeśli chciał.

Answer 4

Jeśli chcesz kontrolować minimalną szerokość okna popover, wystarczy dodać dodatkowy wiersz w css (lub dodatkowego CSS) tak:

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

(zastąpi 200px z żądaną wartość)

Answer 5

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

zmiana max-width do żądanej wartości, można również ustawić min-width, jeśli chcesz

Answer 6

... 
width:auto; 
... 

było idealnym rozwiązaniem w moim przypadku. Miałem wiele popoverów na tej samej stronie, a jeden z nich ma długi adres URL. Wszystkie teraz wyglądają ładnie. Dziękuję JFK!

Answer 7

1) Łatwy sposób: (uwaga: ta będzie dotyczyć wszystkich popovers):

Wystarczy zastąpić startowej.style popover jak poniżej

.popover{ 
    max-width: 600px; 
} 

2) sposób:

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

Pierwszy dodać niestandardowej klasy do szablonu popover jak powyżej mojego-custom-klasie. Zwróć uwagę, że popover będzie renderowany przy użyciu domyślnego szablonu, chyba że określono niestandardowy szablon.

następnie zastąpić style .popover Bootstrap jest jak poniżej:

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

Te style pozwalają mieć dynamiczny do szerokości 600px. Jeśli musisz ustawić minimalną szerokość na popover, po prostu ustaw bezpośrednio opcję szerokości. patrz przykład poniżej

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

Kiedy zwiększyć szerokość, może być konieczne, aby dostosować przestrzeń (offset) pomiędzy skrzynką popover a strona granicy lewo/prawo. Zobacz właściwość viewport, ponieważ ustawia granice.

Answer 8

Niektóre odpowiedzi w niniejszym dokumencie zalecają właśnie uczynienie klasy popover określoną szerokością. To nie jest dobre, ponieważ wpływa na wszystkie popover. Użyj zamiast coś takiego, coś bardziej ukierunkowane:

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

Answer 9

Wyłącz max-width w .popover:

.popover { 
    max-width: none; 
} 

a następnie można grać z wielkością treści bardziej swobodnie.

Answer 10

Dodaj swoją zawartość popover jako HTML z własnej klasy, a następnie w CSS plików dodatek:

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

„.own klasy” Element szerokość określi szerokość popover.