Bootstrap 3 kullanarak bir sayfa tasarlıyorum placement: right. Girdi öğesinde bir popover kullanmaya çalışıyorum . Yeni Bootstrap, form-controltemelde tam genişlikte bir giriş elemanına sahip olmanızı sağlar .

HTML kodu şuna benzer:

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover" 
                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

Bence popovers genişliği çok düşük, çünkü div'da herhangi bir genişlik kalmadı. Sol taraftaki giriş formunu, sağ taraftaki geniş popover'ı istiyorum.

Çoğunlukla Bootstrap'i geçersiz kılmak zorunda olmadığım bir çözüm arıyorum.

Ekli JsFiddle. İkinci giriş seçeneği. Jsfiddle'ı çok kullanmadım, bu yüzden bilmiyorum, ancak sonuçları görmek için çıkış kutusunun boyutunu artırmayı deneyin, daha küçük ekranlarda bile görmezdi. http://jsfiddle.net/Rqx8T/

CSS ile genişliği artırın

Popserinizin genişliğini artırmak için CSS kullanabilirsiniz, örneğin:

/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

Bu işe yaramazsa, muhtemelen aşağıdaki çözümü istiyor ve öğenizi değiştiriyorsunuz container. ( JSFiddle'ı görüntüle )

Twitter Bootstrap Kabı

Bu işe yaramazsa, büyük olasılıkla kapsayıcıyı belirtmeniz gerekir:

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

Daha fazla bilgi

Popover, tetiklendiği elemanın içinde bulunur. "Tam genişlik" i genişletmek için kabı belirtin:

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

JSFiddle

Denemek için JSFiddle'ı görüntüleyin.

JSFiddle: http://jsfiddle.net/xp1369g4/

Ayrıca arama metni alanı için daha geniş bir popover ihtiyacım vardı. Bu Javascript çözümünü (burada Kahve'de ) buldum :

$(".product-search-trigger")
  .click(-> false) # cancel click on <a> tag
  .popover
    container: "body"
    html: true
    placement: "left"
    title: "<strong>Product search</strong> enter number or name"
  .on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))

Geçici çözüm son satırdadır. Popover görüntülenmeden önce maksimum genişlik seçeneği özel bir değere ayarlanır. Ayrıca, uç öğesine özel bir sınıf da ekleyebilirsiniz.

Ben de aynı problemi yaşadım. Bir cevap aramak için biraz zaman harcadım ve kendi çözümümü buldum: Kafasına aşağıdaki metni ekleyin:

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>

Genişliği değiştirmek için css kullanabilirsiniz

Sabit boyut aranıyor

.popover{
    width:200px;
    height:250px;    
}

İstenen maksimum genişlik için:

.popover{
    max-width:200px;
    height:250px;    
}

jsfiddle : http://jsfiddle.net/Rqx8T/2/

Popover genişliğini değiştirmek için şablonu geçersiz kılabilirsiniz:

$('#name').popover({
    template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
})

JavaScript çözümünü tercih edenler için. İçinde Bootstrap 4 ucunun () olmuştur getTipElement () ve hiç bir jQuery nesnesini geri gönderir. Öyleyse Bootstrap 4'teki popover'ın genişliğini değiştirmek için şunları kullanabilirsiniz:

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});

<div class="row" data-toggle="popover" data-trigger="hover" 
                 data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
    <label for="name">Name:</label>
    <input id="name" class="form-control" type="text" />
</div>
</div>

Temelde popover kodunu giriş div yerine div div koymak. Sorun çözüldü.

@EML'nin modal pencerelerde popover ve ayrıca @ 2called-chaos tarafından gösterilen kodla ilgili olarak tarif ettiği şey sayesinde, sorunu bu şekilde çözdüm.

Modda, tıklandığında pop-up olması gereken bir simge var

HTML kodum

<i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line<br />B - Second line - Long line <br />C - Third Line - Long Long Long Line"></i>

Senaryom

    $('[rel=popover]').popover({
        placement: 'bottom',
        html: 'true',
        container: '#name-of-modal-window .modal-body'
    }).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });

Burada son bir çözüm yok: / Bu sorunun nasıl "temiz" bir şekilde çözüleceğine dair bazı düşünceler ...

Orijinal JSFiddle sürümünüzün güncelleştirilmiş sürümü (jQuery 1.11 + Bootstrap 3.1.1 + class = "col-xs-" yerine class = "col-md-"): http://jsfiddle.net/tkrotoff/N99h7/

Şimdi önerilen çözümünüzle aynı JSFiddle : http://jsfiddle.net/tkrotoff/N99h7/8/
Çalışmıyor: popover <div class="col-*">+ 'ya göre aynı konum için birden fazla girişiniz olduğunu düşünün <div class="col-*">...

Yani popover'ı girdiler üzerinde tutmak istiyorsak (anlamsal olarak daha iyi):

• .popover { position: fixed; }: ancak sonra sayfayı her kaydırdığınızda popover kaydırmayı takip etmez
• .popover { width: 100%; }: yine de ana genişliğe bağlı olduğunuz için iyi değil (ör. <div class="col-*">
• .popover-content { white-space: nowrap; }: yalnızca popover içindeki metin şundan kısasa iyi max-width

Bkz. Http://jsfiddle.net/tkrotoff/N99h7/11/

Belki, çok yeni tarayıcılar kullanarak, yeni CSS genişliği değerleri sorunu çözebilir, denemedim.

container: 'body'normalde hile yapar (yukarıdaki JustAnil'in cevabına bakın), ancak popoveriniz bir modda ise bir sorun var. z-indexYerlerde bunu arkasında modal popover bağlı ne zaman body. Bu BS2 sayı 5014 ile ilgili gibi görünüyor , ama 3.1.1. Bir kullanmak kaderimiz değil containerait body, ancak kodu için onarırlarsa

   $('#fubar').popover({
   trigger : 'hover',
   html    : true,
   dataContainer : '.modal-body',
   ...etc });

o zaman düzeltmek z-indexsorunu ancak popover genişliği hala yanlış.

Bulabildiğim tek düzeltme kullanmak container: 'body've bazı ekstra css eklemek için:

.popover { 
  max-width : 400px;
  z-index   : 1060;
}

Css çözümlerinin kendi başlarına çalışmadığını unutmayın.

Popover içinde data-container = "body" özniteliğini kullanabilirsiniz

<i class="fa fa-info-circle" data-container="body" data-toggle="popover"
   data-placement="right" data-trigger="hover" title="Title"
   data-content="Your content"></i>

Fareyle üzerine gelmenin kahve olmayan yolu şöyledir:

$(".product-search-trigger").popover({
    trigger: "hover",
    container: "body",
    html: true,
    placement: "left"
  }).on("show.bs.popover", function() {
    return $(this).data("bs.popover").tip().css({
      maxWidth: "300px"
    });
  });
});

Bootstrap 4 beta için test edilmiş bir çözüm:

.popover {
        min-width: 30em !important;
    }

JQuery ifadesiyle birlikte:

$('[data-toggle="popover"]').popover({
      container: 'body',
      trigger: 'focus',
      html: true,
      placement: 'top'
    })

Yan not, data-container="body"ya container: "body"içinde HTML veya bir şekilde optionkarşıpopover({}) nesneye gerçekten hile yapmadım [belki ancak birlikte CSS ifadeye işi ama yapacak];

Ayrıca, Bootstrap 4 beta'nın popover ve araç ipucu konumlandırması için popper.js'ye dayandığını unutmayın (bundan önce tether.js idi)

Popover'ın genişliğini yukarıda belirtilen yöntemlerle ayarlayabilirsiniz, ancak yapılacak en iyi şey Bootstrap'ı görmeden ve matematik yapmadan önce içeriğin genişliğini tanımlamaktır. Örneğin, bir masam vardı, genişliğini tanımladım, sonra bootstrap ona uyacak bir popover oluşturdu. (Bazen Bootstrap genişliği belirlemekte sorun yaşar ve elini girip tutmanız gerekir)

Bunu kullandım (iyi çalışıyor):

.popover{
   background-color:#b94a48;
   border:none;
   border-radius:unset;
   min-width:100px;
   width:100%;
   max-width:400px;
   overflow-wrap:break-word;
}

 <label id="txtLbl">Overview</label> <a tabindex="0" class="btn btn-default" role="button" data-toggle="popover"  data-placement="right" id="Pops" ></a>  
<div id="popover-content" class="hide">
  <div class="popovermenu">
        Your content                   
  </div>
 </div>

Sonunda div "popover-content" genişliğini istediğim sayıya ayarlayarak bitiriyorum. (diğer kimlikler veya sınıf çalışmaz .....) İyi şanslar!

  #popover-content{
      width: 600px;

  }

işi yapması gereken data-container = "body" öğesini de ekleyebilirsiniz:

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover"

                         data-container="body"

                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

Popover'inizin şablonunu değiştirebilirsiniz. -Attribute ile data-templateveya onu ayarlayan işlevin ilgili kısmıyla:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
  <body>
    <span class="text-green" data-toggle="popover" data-placement="right" data-template="<div class=&quot;popover fade top in&quot; style=&quot;max-width:none;&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-title&quot;></h3><div class=&quot;popover-content&quot;></div></div>" data-trigger="manual" data-original-title="Some Title" data-content="<div>Some really long text and stuff. Some really long text and stuff. Some really long text and stuff. Some really long text and stuff.</div>" data-html="true" onclick="$(this).popover('show');">clickme</span>
  </body>
</html>

Bir daktilo bileşeni için:

@Component({
    selector: "your-component",
    templateUrl: "your-template.component.html",
    styles: [`
        :host >>> .popover {
          max-width: 100%;
        }
    `]
})

Eğik olarak ng-bootstrapyapabilirsiniz basitçe container="body"tetikleyiciler (örneğin düğme veya metin kutusu gibi) popover bu kontrole. Ardından global stil dosyası ( style.cssveya style.scss) dosyanıza eklemeniz gerekir .popover { max-width: 100% !important; }. Bundan sonra, popover içeriği otomatik olarak içerik genişliğine ayarlanacaktır.

Bootstrap 4'te $popover-max-widthstyles.scss dosyanızdaki bootstrap değişkeninin varsayılan değerini aşağıdaki gibi geçersiz kılabilirsiniz :

$popover-max-width: 300px;

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/popover";

Bootstrap 4 varsayılanlarını geçersiz kılma hakkında daha fazla bilgi https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

Bootstrap 4'te, maksimum genişliği geçersiz kılarak şablon seçeneğini kolayca inceleyebilirsiniz:

$('#myButton').popover({
    placement: 'bottom',
    html: true,
    trigger: 'click',
    template: '<div class="popover" style="max-width: 500px;" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});

Sayfada çok sayıda poposunuz varsa bu iyi bir çözümdür.

Bunu dene:

var popover_size=($('.popover').css('width'));
var string=(popover_size).split('px');
alert("string"+string);
popover_size = ((parseInt(string[0])+350));
alert("ps"+popover_size);
$('.popover').css('width',parseInt(popover_size));