1

私は新しいアプリのレスポンシブ バージョンに取り組んでおり、ページが狭いバージョンに表示されると、ボタンとドロップダウンがtop navbar他のアイテムの下に移動するだけであることに気付きました。

そのような場合の私の夢の状況は、つまりを置き換えるだけです：

<a href="#"><i class="icon-flag"></i> Very long label of this button</a>

と

<a href="#"><i class="icon-flag"></i></a>

「生の」Bootstrapでこれを達成できますか?

私が今持っている唯一のアイデアは、イベントでリンクのラベルの可視性を組み込んでjQuery切り替えることです（つまり、スパンでラップした後）resize()

<a href="#">
  <i class="icon-flag"></i> <span>Very long label of this button</span></a>

コメントと結論への回答

以前は指定していませんでしたが、私の意図は、ブレークポイントをカスタム設定する可能性を維持することです。そのため、 、およびセレクターnarrow versionについてではなく、について質問しました。もちろん、ほとんどの場合、デフォルトのセレクターで問題ありませんが、必要な追加の柔軟性が得られます。phonetabletdesktopmedia queries

4

2 に答える 2

6

これは、デフォルトの Bootstrap のレスポンシブ クラスで実現できます。

<a href="#"><i class="icon-flag"></i>
      <span class="hidden-phone">Very long label of this button</span></a>

それがニーズを満たさない場合は、必要に応じmedia queriesてラベルを設定するために使用できdisplay:none;ます

<a class="target_el" href="#"><i class="icon-flag">
      </i><span>Very long label of this button</span></a>

@media only screen and (min-width:0px) and (max-width:320px)
{
    .target_el span { display:none; }
}

それ以外の場合は、jQuery ルートに移動する必要があります。

于 2012-08-02T19:46:44.173 に答える
3

クラス.hidden-phoneまたは.visible-desktopまたは（ドキュメント.visible-tabletを確認してください）を使用して、特定の解像度で要素を非表示または表示できます。

@mediaこれらのクラスが提供されているため、実際にはクエリを使用しないでください。

于 2012-08-02T22:26:21.063 に答える