わかりましたので、メディアクエリを使用して画面のサイズを変更するときにコンテンツを削除する最善の方法を見つけようとしています。ただし、私は Twitter Bootstrap グリッド システムを使用しており、少しトリッキーになっているため、いくつかの指針をいただければ幸いです。
次の基本的なグリッドがあるとしましょう:-
<div class="container-fluid">
<div class="row-fluid">
<div id="left-content" class="span6">
Left Content
</div>
<div id="right-content" class="span6">
Right Content
</div>
</div>
</div>
私はcssメディアクエリを使用して、画面の幅が特定のサイズに縮小されたときに、次の#right-content
ように単純なものを非表示にしたい:-
@media screen and (max-width: 800px) {
#right-content {
display:none;
}
}
ただし、コンテンツが画面と同じ幅になるように、クラスを to#left-content
からspan6
toに更新する必要があります。span12
私は明らかにJavaScriptでこれを行うことができますが、これは純粋なcssで行うことができますか?