twitter-bootstrap - 携帯電話のブートストラップで列を非表示にする

Question

2 つの列を持つサイトがあり、モバイルでサイトを表示するときに列の 1 つを非表示にしたいと考えています。hidden_​​phone クラスを使用して、列クラスを 99% または画面サイズのメディア クエリを使用しているものに設定できることは知っていますが、これが正しい方法であるかどうか疑問に思っています。より良い方法またはより正しい方法はありますか

<div class="container>
 <div class="row">
  <div class="span8">some content</div>
  <div class="span4 hidden-phone">some content</div>
 </div>
</div> 

@media (max-width: someresolution){
 .span8{
  width:99.3214534%;
 }
}

Answer 1

はい、これは実際に twitter ブートストラップが使用するアプローチです。彼らのグリッドシステムのソースコードを見てください。

hidden-phone などのクラス (これらはバージョン 3 でhidden-xsなどに名前が変更されました) は、現在のメディア クエリに応じて "display" 属性を "none" または "block" に設定するだけで機能します。完全な詳細が必要な場合は、responsive-utilities と mixin を見て、「responsive-visibility」というテキストを探してください 。

これは「CSS」ではなく「少ない」ですが、読み取り可能である必要があります。「less」とは何か知りたい場合は、lesscss.orgの Web サイトにアクセスしてください。