0

次の簡単なマークアップがあります。

<div class="container">
    <div class="row">
        <div class="span8">
            <!- Main page -->
        </div>
        <div class="span4 visible-desktop">
            <!- Right-hand Sidebar -->
        </div>
    </div>
</div>

基本的に、私が望むのは、デスクトップ以外のデバイスのサイドバーを削除して、メイン ページが幅全体を占めるようにすることだけです。

マークアップを使用すると、サイドバーは小さな画面 (タブレットなど) では見えなくなりますが、メイン ビットは画面全体に広がっておらず、白い隙間が残るだけです。

非常に小さな画面 (モバイルなど) では、サイドバーは正しく非表示になります。

マークアップ/スタイルを変更して、タブレット デバイスで必要なように動作させるにはどうすればよいですか?

（jQueryがオプションであることは知っていますが、可能であればjs以外のアプローチを好むでしょう）

4

1 に答える 1

2

初めてOPの質問を正しく理解できなかったので、質問を更新しました。

ブートストラップが @media タグがこのように機能することを意図していたとは思いませんが、対象のメディア サイズに合わせて bootstrap-responsive.css コードを編集できます。

cssファイルに次のようなものが表示されるはずです

media (min-width: 768px) and (max-width: 979px) {
    .row {
         margin-left: -20px;
         *zoom: 1;
    }
.
.
.
    .magepage{
         width:100%;
    }
}

そしてあなたのコードをこのようにしてください

<div class="container">
    <div class="row">
        <div class="span8 mainpage">
            <!- Main page -->
        </div>
        <div class="span4 visible-desktop">
            <!- Right-hand Sidebar -->
        </div>
    </div>
</div>

お役に立てれば、

于 2012-09-19T23:53:11.840 に答える