213

placement: rightBootstrap 3 を使用してページを設計しています。入力要素でポップオーバーを使用しようとしています。新しい 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/

4

24 に答える 24

365

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

より詳しい情報

Twitter Bootstrap ポップオーバーの幅を広げる

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

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

于 2014-03-17T16:29:14.283 に答える
39

私も同じ問題を抱えていました。答えを探すのにかなりの時間を費やし、独自の解決策を見つけました。次のテキストを頭に追加します。

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>
于 2014-07-08T20:47:17.120 に答える
39

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

$(".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 要素に追加することもできます。

于 2014-03-12T16:44:12.560 に答える
6 
<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 にポップオーバー コードを配置します。問題を解決しました。

于 2013-10-26T08:00:43.637 に答える
4

container: 'body'通常はトリックを行います (上記の JustAnil の回答を参照) が、ポップオーバーがモーダルである場合は問題があります。ポップオーバーが にアタッチされている場合、 はモーダルの後ろに配置しz-indexます。これはBS2 issue 5014に関連しているようですが、3.1.1 で取得しています。ofを使用するつもりはありませんが、コードを次のように修正するとbodycontainerbody

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

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

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

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

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

于 2014-08-15T12:58:51.857 に答える
4

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

元の JSFiddle の更新バージョン (jQuery 1.11 + Bootstrap 3.1.1 + class="col-xs-" の代わりに class="col-md-"): 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 幅の値で問題が解決する可能性がありますが、私は試していません。

于 2014-03-12T19:40:28.300 に答える
2

私はこれを使用しました（正常に動作しています）：

.popover{
   background-color:#b94a48;
   border:none;
   border-radius:unset;
   min-width:100px;
   width:100%;
   max-width:400px;
   overflow-wrap:break-word;
}
于 2016-08-12T09:41:46.977 に答える
2 
 <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" width を必要な数に設定することで終わります。(他の ID やクラスは機能しません.....) 頑張ってください!

  #popover-content{
      width: 600px;

  }
于 2018-01-24T03:32:39.150 に答える
2

上記の方法でポップオーバーの幅を調整できますが、最善の方法は、Bootstrap がそれを認識して計算を行う前に、コンテンツの幅を定義することです。たとえば、テーブルがあり、その幅を定義してから、ブートストラップでそれに合わせてポップオーバーを作成しました。(Bootstrap が幅を決定するのに苦労する場合があり、踏み込んで手を握る必要があります)

于 2015-01-14T03:46:23.777 に答える
0

$popover-max-widthブートストラップ 4では、次のように、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

于 2019-11-18T02:28:10.420 に答える
0

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

于 2019-10-29T15:44:31.630 に答える