[解決済み] Bootstrapのポップオーバーの幅を変更する
2022-02-07 18:37:22
質問
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に置きました。問題は解決しました。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] SCSSとSassの違いは何ですか?
-
[解決済み] リスト項目にマウスを置いたときに、カーソルを手の形に変えるには?
-
[解決済み] コンテナの幅に応じたフォントの拡大縮小
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] Bootstrap 3 の sr-only とは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン