Twitter Bootstrap を使用し、レスポンシブ機能が含まれている Web サイトがあるとします。この例では、クラスとして を使用した div 内の画像とspan1
、クラスとして を使用した div 内のテキストを含む div がありspan11
ます。携帯電話からサイトを閲覧しているときに画像を表示したくありません。使用するコードは次のとおりです。
<div class="row-fluid">
<div class="span1 hidden-phone">
<img src="path/to/image">
</div>
<div class="span11">
<p>Here is some text</p>
</div>
</div>
この例span1
から、携帯電話からサイトにアクセスした場合、div は非表示になりますが、span11
div は引き続き表示されます。
このコードを使用すると、コンテンツはspan11
ページの幅全体に広がりますか (携帯電話で表示されている場合)、それとも Bootstrap グリッドの 12 スペースのうち 11 スペースしか広まりませんか? この場合、段落がグリッドで定義されている 12 個のスペースのうち 11 個だけではなく、ページの幅全体span11
にまたがるように指定するにはどうすればよいでしょうか?