0

中サイズ以上の画面サイズでは、コンテンツを左側に、サイドバーのコンテンツを右側に配置したいと考えています。小さいデバイスでは、サイドバー コンテンツをメイン コンテンツの上に置き、残りを下に置きたいと考えています。私が知る限り、これは私を近づけます。デスクトップ ビューのコンテンツの横に最後のサイドバーを浮かせる必要があるだけです。しかし、それは協力的ではありません。別の解決策は、コンテンツが重複する表示クラスと非表示クラスを追加することです。私はその解決策に興味がありません。

.content {
  margin: 10px;
  padding: 10px;
  text-align: center;
  font-weight: bold;
}

.main-content {
  background-color: #eee;
  height: 400px;
}

.sidebar-a {
  background-color: red;
  height: 200px;
  color: #fff;
}

.sidebar-b {
  background-color: blue;
  height: 200px;
  color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">
                <div class="content sidebar-a">
                  Sidebar A
                </div>
            </div>
            <div class="col-md-8 pull-up col-md-pull-4">
                <div class="content main-content">
                  Main Content
                </div>
            </div>
            <div class="col-md-4 col-md-push-8">
                <div class="content sidebar-b">
                  Sidebar Content B
                </div>
            </div>
        </div>
    </div>

コンテンツの隣にサイドバー b が表示されることを期待して、フロートしようとしています。その時点で、プッシュ クラスは不要です。デスクトップでの結果は、視覚的には上記と同じです。

4

0 に答える 0