ブートストラップグリッドシステムが崩壊

Question

約990px​​で、私はグリッドフォールドを1つの巨大な列に見ています。私はそれをしたくないと思っています。スクリーンキャプチャで見ることができるように、右側にたくさんのスペースがあります。 2列目を追加する必要がありますか？

.col-md-12.col-sm-6 
btn.btn.btn-primary(ui-sref='menus.new') 
    |Create New Menu 

.row 
    .col-md-2 
     h4 KEY 
    .col-md-2.hidden-sm 
     h4 CREATED 
    .col-md-3.col-md-offset-3 
     h4 ACTIONS 

.row.form-group(ng-repeat='menu in menus') 
    .col-md-2 
     | {{menu.key}} 
    .col-md-2.hidden-sm 
     | {{::menu.created | date : 'medium' }} 
    .col-md-3.col-md-offset-2 
     .row 
      .col-md-6 
       button.btn.btn-default.btn-block(ui-sref="menus.edit({id: menu._id})") 
        | Edit 
      .col-md-6 
       button.btn.btn-danger.btn-block(ng-click="removeMenu(menu._id, $index)") 
        | Delete 

私は無駄に作成した列を非表示にしようとした

Answer 1

この理由は、あなたがしようとしたときは、それがいることを検出900pxにそれを置くことです携帯電話やタブレットの場合は変更する必要があります。これは特別なことですブートストラップすべてのサイズを変更するので、メディアクエリを書く必要はありません。最も簡単な方法は、画面はこのようにそれを解決するためにcol-sm-*

最も簡単な方法を使用して、「小」になったとき、あなたが希望の列の数を指定することです、あなたのcol-md-*

の隣に col-sm- 'size you want from 1 to 12'を埋め込むことです

Answer 2

私が気づいた後、私は気づいた。あなたがブートストラップで物事を隠すときは、あなたが隠したい明示的に各レベルを呼び出さなければならない。

あなたが私のスクリーンキャップで見ているのは、非常に小さい（別名xs）レベルです。私が隠していると思ったことはすべて、レンダリングされたビューに詰め込まれています。 BAH

修正例：

.row 
    .col-md-2 
     h4 KEY 
    .col-md-2.hidden-sm.hidden-xs 
     h4 CREATED