web-dev-qa-db-ja.com

Twitterの幅の変更bootstrap popover

Twitterの幅を変更しようとしていますbootstrap popover using bootstrap 3：

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">

$('#popover').popover(options)

現在、ポップオーバーのコンテンツは2行に広がっています。ポップオーバーコンテンツを1行に収めたい。これは可能ですか？

C＃、html、cssを使用しています。

htmlcsstwitter-bootstrappopover
40
user3395822

CSSを使用してポップオーバーの寸法を変更できます。

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

しかし、そのCSSはすべてのポップオーバーを変更します。あなたがする必要があるのは、コンテナ要素にボタンを配置し、次のようなCSSを使用することです：

#containerElem .popover {
  width:200px;
  height:250px;
  max-width:none; // Required for popovers wider than 276px (Bootstrap's max-width for popovers)
}

コンテナに合わせてdata-container="#containerElem"も変更する必要があります。

注：ポップオーバーの幅が276pxを超える場合、max-widthプロパティもオーバーライドする必要があります。 max-width: noneを.popover {}クラスに追加します。

ここにjsFiddleがあります： http://jsfiddle.net/4FMmA/

77
Gavin

JavaScriptで幅を制御したい場合：

HTML（Bootstrapの例）

<button id="exampleButton" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top</button>

Javascript：

show.bs.popoverイベントがトリガーされるときの最大幅を設定します。

var p = $("#exampleButton").popover();
p.on("show.bs.popover", function(e){
    p.data("bs.popover").tip().css({"max-width": "500px"});
});

http://jsfiddle.net/ctoesca/u3kSk

  • ボタン要素にdata-max-width属性を追加して、トリガー関数で値を取得することもできます。
p.on("show.bs.popover", function(e){
    var w = $(this).attr("data-max-width");
    p.data("bs.popover").tip().css({"max-width": w});
});
17
c-toesca
.popover{
    max-width: 100%;
    width: <width>;
}

「max-width」は、ポップオーバーの最大幅をページの幅に設定します。その後、好きなように幅を設定できます

12
sunnyiitkgp

このコードを使用してください。それはうまくいきます：

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

ポップオーバーの幅は調整できますが、Bootstrapが表示される前にコンテンツの幅を定義することが最善です。たとえば、テーブルがあり、その幅を定義してから、bootstrapがそれに合わせてポップオーバーを作成しました。 （ときどきBootstrapが幅を決定するのに問題があり、踏み込んで手を握る必要があります）

2
CloudMagick

私は簡単な解決策があるかもしれません：

以下を追加しますcssクラス：

.app-popover-fw { width: 276px; }</ code>

次のtemplateをポップオーバーに使用します

var newPopoverTemplate = '<div class="popover app-popover-fw" role="popover">' +
                             '<div class="arrow"></div>'+ 
                             '<h3 class="popover-title"></h3>'+
                             '<div class="popover-content"></div>'+
                          '</div>';

$('#example').popover({template: newPopoverTemplate });`

作業フィドル： http://jsfiddle.net/b5Ly2ynd/

[〜＃〜] nb [〜＃〜]：他の人が言ったように、bsポップオーバーには「最大幅」プロパティがあります。ポップオーバーを276pxより大きくしたい場合は、これを変更する必要があります。

2
Xavier13

次のコードを使用しました。

.popover {
      width: 600px;
      max-width: 600px;
      font-size: 13px;
      font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
      Word-break: break-all;
      Word-wrap: break-Word;
      white-space: pre;
      width: 600px;
    }
1
superlogical

別のオプションは、次のようなカスタムテンプレートを使用することです（追加クラスのみ追加：popover-lg）：

<div class="popover popover-lg" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>

その後、CSSで：

.popover-lg {
    max-width: 100%;
}

呼び出し：

$(".your-element")..popover({
        trigger: "hover",
        template: templateString,
        container: "body",
        content: '...',
    });

この方法はクリーンで、元のbootstrapの動作を妨げません。

1
Marcin

これは2つの方法で実現できます。1つは「popover」クラスのフォントサイズを小さくすること、もう1つは「popover-content」クラスのパディングを小さくすることです。ここに私がそれを達成した方法があります、

.popover {
  font-size: 12px;
}

.popover-content {
  padding: 5px 5px;
}
0
Harsha Rastogi

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

.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}
0
Asiri Jayaweera

CSSオーバーライドクラスで直接オーバーライドせずにポップオーバープロパティに影響を与えることがわかった最良の方法は、ポップオーバーをインスタンス化するときにコンテナ属性を使用し、複雑なセレクタを使用してプロパティをオーバーライドし、それにより他のプロパティを元のプロパティのままにすることですあなたがあなたのサイトの他のエリアであなたが望むかもしれないポップオーバー。

もちろん、.popoverでmax-widthをオーバーライドするだけでも機能しますが、その場合は、すべてをオーバーライドして、本質的に目的を無効にする必要があります。

ポップオーバーのコンテナーをトリガー要素のコンテナーに設定してから、.container> .popoverのような複雑なCSSクラスを作成し、そのインスタンスのみにポップオーバーの最大幅を設定します。

0
iGanja