web-dev-qa-db-ja.com

Bootstrap 3で画面のサイズが変更されたときにボタンのテキストを自動的に変更する

このコードを検討してください：

[〜＃〜] html [〜＃〜]

<div class="col-xs-3 col-sm-3">
  <button type="button" class="btn btn-default btn-md btn-block">
  <i class="fa fa-plus"></i> Add New Item</button>
</div>

[〜＃〜] css [〜＃〜]

@media only screen and (max-width: 767px) {
    button {
        content: '<i class="fa fa-plus"></i>';
    }
}

画面を水平方向にサイズ変更すると、ある時点でテキストがボタンからはみ出します。

横画面のサイズが変更されたときにボタンのテキストを自動的に変更できるかどうかを知りたい。小さなデバイスでは、「+ Add New Item」のようなものだけがプラス信号「+」に追加されます。

私はメディアクエリに少し慣れていないので、何かが足りない、または間違っていると思います。

誰かが私を助けてくれますか？

私はこれを fiddle にしました。

htmlcsstwitter-bootstraptwitter-bootstrap-3media-queries
12
Lord_Dracon

この実用的なデモを試してください： JSFiddle 。

ボタンのテキストにクラスを追加し、画面サイズが十分に小さい場合はdisplay:noneを設定します。

<button type="button" class="btn btn-default btn-md btn-block">
    <i class="fa fa-plus"></i>
    <span class="button-text">Add New Item</span>
</button>

そしてCSS：

@media screen and (max-width: 300px) {
    .button-text {
        display: none;
    }
}

提案：DOM構造または情報をCSSスタイル内に配置しないでください。メンテナンスが難しい。

10
Joy

これを行うには、Bootstrap内の組み込みの応答ユーティリティを使用して、追加のメディアクエリやCSSを追加する必要はありません。

<div class="col-xs-3 col-sm-3">
  <button type="button" class="btn btn-default btn-md btn-block">
  <i class="fa fa-plus"></i><span class="hidden-sm hidden-xs">Add New Item</span></button>
</div>

それはもう少しHTMLマークアップを追加しますが、余分なデータはHTMLまたはCSSのどちらかで送られるので、どちらかが最適です。

17
Blackpool Towr

Bootstrapを使用する場合、2つのクラスに忍び込むのと同じくらい簡単です。

hidden-smおよびhidden-xshide画面幅がそれぞれ中または小の場合の要素。

つまり、画面が小さいときに非表示にしたい場合は、それらのクラスを適用するだけです！

例：

<button class="btn btn-primary">
    <span class="glyphicon glyphicon-person"></span>
    <span class="hidden-xs hidden-sm">Profile</span>
</button>
3
OverCoder

（テキストを変更する必要があると思われるポイントで）別のメディアクエリを作成し、ボタン内のテキストを非表示にするだけです。ボタンを現在の場所に配置する代わりに、<span>にカプセル化し、ページがxピクセルより小さくなったときにdisplayをnoneに設定するCSSを記述します。

[〜＃〜] html [〜＃〜]

<div class="col-xs-3 col-sm-3">
  <button type="button" class="btn btn-default btn-md btn-block">
  <i class="fa fa-plus"></i><span>Add New Item</span></button>
</div>

[〜＃〜] css [〜＃〜]

@media only screen and (max-width: <change this value>) {
    button span {
        display: none;
    }
}

ただし、ボタンを他の場所に配置した場合に機能することを保証する方法がないため、jQueryで解決する必要があると思います。ボタンのコンテンツがボタン自体の幅より広いかどうかを確認してから、それに応じて「非表示」クラスを追加する必要があります

私はあなたのjsfiddleを少し変更しましたが、jQueryはこれで少しバグがあるようです（関数で使用している値を出力してみてください）

https://jsfiddle.net/ogt84jds/1/

2
Ruben Rutten

私は2つの異なるボタンを表示および非表示にするフィドルを作成しましたが、これはおそらく最善の方法ではありませんが、動作します。

http://jsfiddle.net/xo9xkv05/

HTML

<div class="less">
  <button type="button" class="btn btn-default btn-md btn-block"><i class="fa fa-plus"></i></button>
</div>
<div class="more">
  <button type="button" class="btn btn-default btn-md btn-block"><i class="fa fa-plus"></i> Add New Item</button>
</div>

CSS

.less {
    display:none;
}
@media (max-width: 300px) {
    .less {
        display:block;
    }
    .more {
        display:none;
    }
}
1
Kilowog