7

ブートストラップ コアの配置を調整しますが、bootstrap-sass gem を更新可能にしたいと考えています。ポップオーバー オフセットの変数はなく、1 種類のポップオーバーをオフセットするだけで済みます。

ここに画像の説明を入力

上部は問題を示しています。下は、chrome dev tools を使用した私の調整です。この変更を CSS にコミットすると、Bootstrap の動的配置が再調整され、上記のケースのように見えます。親divの制限内にポップオーバーを自動的に表示する方法はありますか? そうでない場合、負のマージンで動的なポップオーバーの配置を克服するにはどうすればよいですか?

更新: コードを追加します。これは、ボタン グループの結果の HTML です。最初のリンクのポップオーバーは機能しますが、無視できます。

<div class="btn-group btn-section pull-right">
  <a href="/sections/edit_section_text/118" class="noprint btn active-workers hidden-phone bs-popover btn-primary" data-content="<ul id="sectionworkers" class="unstyled"><li><img alt="Avatar" class="avatar" height="25" src="https://secure.gravatar.com/avatar.php?d=mm&gravatar_id=9ac2c7fd1c8e43cd5b4d73d3cb585973" width="25" /> <small>Ben</small></li></ul> <!-- #sectionworkers -->" data-placement="bottom" data-target="#s118section" id="edit_btn118" rel="popover" data-original-title="Active Users: ">
    <i class="icon-edit icon-white"></i> Edit
  </a><option>View revision...</option>

  <a href="#" class="noprint btn bs-popover" data-content="<select></select>" data-placement="bottom" data-toggle="popover" id="hist_btn" rel="popover" data-original-title="View and difference revisions"><i class="icon-time"></i> History</a>

  <div class="popover popover-offset fade bottom in" style="top: 30px; left: 155.5px; display: block;">
    <div class="arrow"></div>
    <div class="popover-inner">
      <h3 class="popover-title">
        View and difference revisions
      </h3>
      <div class="popover-content">
        <select></select>
      </div>
    </div>
  </div>
</div>
4

2 に答える 2

7

Archonic の PR と FAT の回答を読んだ後、彼が話していたテンプレートを調査しました。

Bootstrap のテンプレートをコピーしてポップオーバー オプションで指定すると、その時点でクラスを挿入できます。これにより、少なくとも問題は解決しました。 

$el.popover(
  placement: 'top',
  trigger: 'manual', 
  html: true, 
  content: @popoverContent, 
  container: '#mycontainer',
  template: '<div class="popover my_ace_class_name"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
)
于 2013-07-04T05:42:16.047 に答える
1

bootstrap-tooltip.js の 2 行で修正し、プル リクエストを作成します。これにより、必要なスタイルの追加に対応し、ツールチップやポップオーバーで発生する可能性のある配置の問題を修正できます.

this.$element.trigger('shown')bootstrap-tooltip.js で、 inの直前に以下show: function ()を追加します。

$tip.addClass(this.options.class)

this.$element.trigger('hidden')次に、 inの直前にhide: function ()追加します

$tip.removeClass(this.options.class)

次に、ツールチップまたはポップオーバーを初期化するときに、次のようにスタイルを追加します:

$('.bs-popover').popover({html:true, trigger:'click', class:'whatever-you-want'})

.whatever-you-wantもちろん、CSSで宣言します。

これよりずっと簡単だったはずです-_-。どういたしまして！

于 2013-03-05T20:08:56.423 に答える