Bootstrap 3を使用してページをデザインしていますplacement: right。入力要素でポップオーバーを使用しようとしています。新しいBootstrapを使用するform-controlと、基本的に全幅の入力要素を使用できます。

HTMLコードは次のようになります。

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

私の意見では、ポップオーバーの幅は低すぎます。divに残っている幅がないためです。左側に入力フォーム、右側にワイドポップオーバーが必要です。

ほとんどの場合、Bootstrapをオーバーライドする必要がないソリューションを探しています。

添付されたJsFiddle。2番目の入力オプション。jsfiddleをあまり使用していないのでわかりませんが、結果を表示するには出力ボックスのサイズを大きくしてみてください。小さい画面では表示されません。 http://jsfiddle.net/Rqx8T/

CSSで幅を広げる

次のように、CSSを使用してポップオーバーの幅を広げることができます。

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

これが機能しない場合は、おそらく以下の解決策が必要であり、container要素を変更します。（JSFiddleを表示する）

Twitterブートストラップコンテナー

それが機能しない場合は、おそらくコンテナーを指定する必要があります。

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

より詳しい情報

ポップオーバーは、それがトリガーされる要素内に含まれています。「全幅」に拡張するには、コンテナーを指定します。

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

JSFiddle

JSFiddleを表示して試してください。

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

また、検索テキストフィールドの幅の広いポップオーバーも必要でした。私はこのJavascriptソリューションを思いつきました（ここではコーヒーです）：

$(".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"))

回避策は最後の行にあります。ポップオーバーが表示される前に、max-widthオプションがカスタム値に設定されています。カスタムクラスをtip要素に追加することもできます。

私も同じ問題を抱えていました。かなりの時間をかけて回答を検索し、自分の解決策を見つけました：頭に次のテキストを追加してください：

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

幅を変更するには、CSSを使用できます

固定サイズが欲しい

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

最大幅が必要な場合：

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

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

ポップオーバー幅を変更するには、テンプレートをオーバーライドします。

$('#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ソリューションを好む人向け。でブートストラップ4の先端（）getTipElement（なった）とそれがないjQueryオブジェクトを返します。したがって、Bootstrap 4でポップオーバーの幅を変更するには、次のように使用できます。

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

基本的に、ポップオーバーコードを入力divの代わりに行divに配置します。問題を解決しました。

@EMLがモーダルウィンドウでのポップオーバーに関して上記で説明したこと、および@ 2called-chaosによって示されるコードの助けを借りて、これが私が問題を解決した方法です。

モーダルにアイコンがあり、クリックするとポップアップが表示されます

私のHTML

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

私のスクリプト

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

ここに最終的な解決策はありません：/この問題を「きれいに」解決する方法をいくつか考えただけです...

元のJSFiddleの更新バージョン（jQuery 1.11 + Bootstrap 3.1.1 + class = "col-xs-"ではなくclass = "col-xs-"）：http ://jsfiddle.net/tkrotoff/N99h7/

これで、提案されたソリューションと同じJSFiddle ：http : //jsfiddle.net/tkrotoff/N99h7/8/
これは機能しません：ポップオーバーは<div class="col-*">+ に対して配置されます<div class="col-*">。

したがって、入力のポップオーバーを維持したい場合（意味的にはより良い）：

• .popover { position: fixed; }：しかし、ページをスクロールするたびに、ポップオーバーはスクロールに追従しません
• .popover { width: 100%; }：まだ親の幅に依存しているため、それほど良くありません（つまり、 <div class="col-*">
• .popover-content { white-space: nowrap; }：ポップオーバー内のテキストがより短い場合にのみ有効 max-width

http://jsfiddle.net/tkrotoff/N99h7/11/を参照してください

たぶん、ごく最近のブラウザーを使用すると、新しいCSS幅の値で問題を解決できる可能性があります。

container: 'body'通常はトリックを実行します（上記のJustAnilの回答を参照）が、ポップオーバーがモーダルである場合は問題があります。z-index場所それの後ろのポップオーバーが接続だモーダルbody。これはBS2の問題5014に関連しているようですが、3.1.1で発生しています。あなたが使用することを意図していないcontainerのがbody、しかし、あなたはにコードを修正した場合

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

次に、z-index問題を修正しますが、ポップオーバー幅はまだ間違っています。

私が見つけることができる唯一の修正は、使用container: 'body'していくつかの余分なcssを追加することです：

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

CSSソリューション自体は機能しないことに注意してください。

ポップオーバー内で属性data-container = "body"を使用できます

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

これはホバーでそれを行う非コーヒースクリプトの方法です：

$(".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ベータのテスト済みソリューションの1つ：

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

jQueryステートメントと一緒に：

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

サイドノート、data-container="body"またはcontainer: "body"HTMLで、またはオブジェクトoptionへの注釈として、popover({})実際には効果がありませんでした[たぶん機能しますが、CSSステートメントと組み合わせた場合のみ]。

また、Bootstrap 4ベータは、ポップオーバーとツールチップの配置がpopper.jsに依存していることを覚えておいてください（以前はtether.jsでした）

上記の方法でポップオーバーの幅を調整できますが、Bootstrapが認識して計算を行う前にコンテンツの幅を定義することをお勧めします。たとえば、テーブルがあり、その幅を定義してから、ブートストラップがそれに合うようにポップオーバーを作成しました。（Bootstrapは幅を決定するのに問題があり、手を入れて手を握る必要がある場合があります）

私はこれを使いました（うまくいきます）：

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

div「popover-content」の幅を必要な数に設定することになります。（他のIDまたはクラスは機能しません.....）頑張ってください！

  #popover-content{
      width: 600px;

  }

data-container = "body"を追加することもできます：

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

ポップオーバーのテンプレートを変更できます。data-template-attributeまたはそれを設定する関数の関連部分のいずれか：

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

typescriptコンポーネントの場合：

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

Angularでは、ポップオーバーをトリガーするコントロール（ボタンやテキストボックスなど）にng-bootstrap簡単container="body"にアクセスできます。次に、グローバルスタイルファイル（style.cssまたはstyle.scss）ファイルに追加する必要があります.popover { max-width: 100% !important; }。その後、ポップオーバーのコンテンツは自動的にそのコンテンツの幅に設定されます。

ブートストラップ4 $popover-max-widthでは、次のように、styles.scssファイルのブートストラップ変数のデフォルト値を単にオーバーライドできます。

$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";

ブートストラップ4のデフォルトのオーバーライドの詳細https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

Bootstrap 4では、max-widthをオーバーライドすることにより、テンプレートオプションを簡単に確認できます。

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

ページに複数のポップオーバーがある場合、これは良い解決策です。

これを試して：

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