3

Bootstrapツールチップによって入力フィールドの間隔が折りたたまれるという問題があります。マークアップは次のとおりです。

<form>
  <div class="controls controls-row">
    <input class="span4" data-original-title="Default tooltip" rel="tooltip" type="text" placeholder=".span4">
    <input class="span1" data-original-title="Default tooltip" rel="tooltip" type="text" placeholder=".span1">
  </div>
</form>

ワイヤーアップのデフォルトを使用しています。

$('[rel="tooltip"]').tooltip();

問題を示すために、ここでjsFiddleを作成しました：http：//jsfiddle.net/bAaQP/2/

入力がフォーカスを受け取ると、コントロールの右側の空白が折りたたまれることに注意してください。

Bootstrap2.2.2のグリッドフォームの例を使用しています。フォーム要素には相対的なスパンサイズ設定セットがあり、controls-rowクラスで装飾されたdiv内に含まれています。

Bootstrap-tooltip.jsの最新バージョンでも試しましたが、それでも同じ動作を示します。

4

3 に答える 3

5

編集：Bootstrapは、この問題に対処するバージョン2.3.0container以降、ツールチップとポップオーバーにオプションを追加しました。

使用法：

$('[rel="tooltip"]').tooltip({
    container: '.controls'
});

これは、Bootstrapのややあいまいなバグのようです。

ツールチップが2つのスパンの間に表示されると、このCSSスタイルが無効になります（bootstrap.cssの1319行目）。

.controls-row [class*="span"] + [class*="span"] {
    margin-left: 20px;
}

これが去りmargin-left: 0、空白がジャンプします。これは、ツールチップの「クリック」トリガーを使用したjsFiddleであり、選択したインスペクターでこの動作を観察できます。

目的に応じて、ハック修正として次のCSSを追加できます。

.controls-row [class*="span"] + .tooltip + [class*="span"] {
    margin-left: 20px;
}

より良い解決策：問題を開いてバグを報告します。

于 2013-01-25T04:56:25.010 に答える
1

これはBootstrapのバグではなく、問題の簡単な解決策があります。ツールチップを作成するときに、コンテナオプションを渡すだけです。

$(".my-input").tooltip({
...
container: "body"
});
于 2013-04-18T13:23:20.183 に答える
0

今日、ポップオーバーを使用するときに同様の問題が発生しました。@Saraの回答は非常に役に立ちました（評判があればコメントします）が、正しく表示するには、.tooltipを.popoverに、margin-leftの値を22pxに変更する必要がありました。

.controls-row [class*="span"] + .popover + [class*="span"] {
    margin-left: 22px;
}
于 2013-04-07T17:03:34.073 に答える