1. ホーム
  2. css

[解決済み】Bootstrapのポップオーバーの幅を変更する方法

2022-04-09 18:50:59

質問

Bootstrap3を使って、ページをデザインしています。でポップオーバーを使おうとしています。 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/

解決方法は?

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

基本的に、私はポップオーバーのコードをinput divの代わりにrow divに置きました。問題は解決しました。