bootstrapにてcol-mdの小さいほうが大きくなってしまい、画面レイアウトがおかしくなってしまいます（コードあり）

bootstrapを用いて、画面の記述をしております。

col-sm-8とcol-sm-4で
メイン画面とサイドバーの表示を表現しております。
フルサイズなら問題なく表示されるのですが、
ある一定のサイズのときだけ、col-sm-4が全画面に表示され
レイアウトがおかしくなってしまします。

※ある一定のサイズとは（985×1230px）のことです。そのサイズのときだけおかしくなります。

その一定のサイズよりもっと小さくすると、また、うまい具合に
col-sm-8とcol-sm-4でレイアウトを表示してくれます。

今回やりたいこととしましては、

ある一定のサイズにて
・同様にcol-sm-8とcol-sm-4でレイアウトを表示させる（理想）
・少なくとも、col-sm-4が全画面に表示されるのではなくcol-sm-8が全画面に表示されたいです。

ご教示願えませんでしょうか？
宜しくお願いします。

言葉ではわかりにくいかもしれませんが、随時、問い合わせに対してはお応え致します。

<div class="row">
  <div class="col-sm-12">
  タイトル部分の表示
    <div class="col-sm-8">
   メイン画面の表示
      <div class="col-md-4">
        サイドバーの表示
      </div>
    </div>
  </div>
</div>

行動規範の内容に同意します

回答2件

<div class="col-md-4"> サイドバーの表示 </div> ↓ <div class="col-sm-4"> サイドバーの表示 </div>

col-smとcol-mdが混在しているのでcol-smで統一してみてはどうでしょうか？

投稿2015/05/29 23:47

kaji

総合スコア648

divの重ね具合がうまく行っていないのではないかと思います。

lang
1<div class="row">
2  <div class="col-sm-12">
3  タイトル部分の表示
4  </div>
5</div>
6<div class="row">
7  <div class="col-sm-8">
8   メイン画面の表示
9  </div>
10  <div class="col-md-4">
11    サイドバーの表示
12  </div>
13</div>