画面サイズに基づいて、ブートストラップアコーディオンをどのように使用できるのか疑問に思っていたので、たとえば、すべてに定期的に表示したいdivがあるとしましょう。ただし、モバイルビューでは折りたたむ必要があります。
助言がありますか？
user1278673
質問する
33273 次
9 に答える
19
Shail の提案したアプローチを使用した例を次に示しますが、レイアウトを複製することはありません。意図した動作は、Bootstrap 3 のレスポンシブ ブレークポイントの 1 つで要素を折りたたむことです ( screen-md)。
@media (min-width: @screen-md)
{
#filters
{
display: block;
}
}
<button type="button"
data-toggle="collapse"
data-target="#filters"
class="visible-xs visible-sm collapsed">Filter</button>
<div id="filters" class="collapse">...</div>
マークアップは、css メディア クエリが適用され、クラス#filtersの動作をオーバーライドする場合を除き、折りたたまれているようなものです。collapse
展開するボタン#filtersは、メディア クエリが適用されなくなった場合にのみ表示されます。
于 2013-11-05T02:37:43.467 に答える
3
更新: アコーディオンの動作のように別のものがクリックされた後に div が閉じない前に。機能させるには、パネル グループとパネルを HTML に追加する必要があります。HTMLはCSSとともに更新されました
少し遅れましたが、これがあなたが探していたものであることを願っています. 私は同じことをしようとしていましたが、これが私が思いついた解決策です。まず、ナビゲーションバーがどのように折りたたまれるかを考えてみました。「div-collapse」というクラスを作りました。これは navbar の折りたたみのように機能し、css のどこに配置したかに応じて div を閉じて非表示にします (この例では、div は小さなデバイスで折りたたまれます)。
CSS:
#accordion .panel {
border:none;
-webkit-box-shadow:none;
box-shadow:none;
}
.div-collapse {
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.div-collapse {
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.div-collapse.collapse {
display: block !important;
height: auto !important;
overflow: visible !important;
}
}
HTML:
<div class="container marketing">
<hr class="featurette-divider">
<h2>Heading for some content that you have</h2>
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="col-md-12 visible-xs">
<p>
<button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
#1 Example One
</button>
</p>
</div>
<div id="collapse1" class="div-collapse collapse col-md-4">
<h3>Header 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p>
</div>
</div>
<div class="panel">
<div class="col-md-12 visible-xs">
<p>
<button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
#2 Example Two
</button>
</p>
</div>
<div id="collapse2" class="div-collapse collapse col-md-4">
<h3>Header 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p>
</div>
</div>
<div class="panel">
<div class="col-md-12 visible-xs">
<p>
<button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
#3 Example Three!
</button>
</p>
</div>
<div id="collapse3" class="div-collapse collapse col-md-4">
<h3>Header 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p>
</div>
</div>
</div>
</div>
これにより、小型デバイス用の 3 つのボタンが作成され、クリックされるまで div が非表示になります。画面が小さいデバイスより大きくなると、ブートストラップのレスポンシブ クラスを介してボタンが非表示になります。その後、div は通常どおりの動作に戻ります。これにより、モバイル用とデスクトップ用に 2 つの異なるレイアウトとコンテンツを作成する必要がなくなります。
JS Fiddle デモ: JS Fiddle リンク
于 2015-05-17T04:38:16.910 に答える
2
Bootstrap には、これを支援するクラスが組み込まれています。.visible-phone、.visible-tabletなどを div で使用してみてください。
于 2013-03-20T10:13:22.423 に答える
0
メディアクエリはあなたの友達です。
CSSに次のようなものを追加します（これはiPhone 3-4 +網膜用です）：
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {
/*your css here*/
}
@media only screen and (max-device-width: 480px) and (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) {
/*your css here*/
}
次に、クエリ内にcssを追加して、アコーディオンを折りたたみます。
于 2013-03-20T09:13:58.000 に答える
0
ブートストラップでレスポンシブユーティリティクラスを利用できます。詳細については、このページを確認してくださいhttp://twitter.github.com/bootstrap/scaffolding.html#sensitive
何かのようなもの
<div class="visible-phone">accordion</div>
<div class="visible-desktop">all data you want to display</div>
Jsfiddle デモ
于 2013-03-20T10:14:55.690 に答える
0
既存の回答は少し古くなっています。の代わりにvisible-[devicename]、ブレークポイント ベースのレスポンシブ クラスを使用できます。では、ボックス #someid を 1と 2smの上に完全に表示し、トグル ボタンでxs2 だけ折りたたむことができるようにしたいとします。
ブートストラップ 3
- ブレークポイント ( 、、、)
hidden-*で物を非表示にします。*xssmmdlg - はブレークポイント、は CSS 表示値 ( 、、 )
visible-*-**で示されます。***inlineblockinline-block - デフォルトでは、特定のブレークポイントでのみ折りたたむように設定できます
collapse-*
例えば：
<button class="hidden visible-xs-block" data-toggle="collapse" data-target="#someid">Button label</button>
<div id="someid" class="collapse-xs">Some content here</div>
ブートストラップ 4
hidden-*-up*たとえば、(中程度のデスクトップ) および(大) ブレークポイントで要素hidden-md-upを非表示にします。mdlghidden-*-downは同じで*小さい -サイズ以外hidden-md-downはすべて非表示になります。lgvisible-*同等のものはありません。これらのサイズで非表示にしないようにしてください。
例 (V4 はまだアルファ版であり、崩壊に関していくつかの変更があるように思われるため、これは変更される可能性があることに注意してください):
<button class="hidden-xs-down" data-toggle="collapse" data-target="#someid">Button label</button>
<div id="someid" class="hidden-sm-up">Some content here</div>
ボタンはxsサイズでのみ表示され、折りたたみ可能なボックスはデフォルトでxsサイズの上でのみ非表示になります。
于 2016-05-16T12:18:22.180 に答える
0
Bootstrap-4 では、物事ははるかに簡単です。
<div className="container-fluid text-center d-none d-lg-block">
<div className="row">
<div className="mx-auto col-lg-2">
<p className="text-uppercase">products</p>
</div>
</div>
</div>
大画面でのみ画面に「PRODUCTS」が表示され、中央に配置され（テキストセンター）、幅が2列のみになります
于 2019-05-31T23:32:54.863 に答える