引导网格系统崩溃答案

【问题标题】：Bootstrap grid system collapsing引导网格系统崩溃
【发布时间】：2017-02-08 20:03:12
【问题描述】：

在大约 990 像素处，我看到我的网格折叠成一个巨大的柱子。我不希望它这样做，正如您在屏幕截图中看到的那样，右侧有很多空间...我需要吗？添加第二列？

.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

我尝试隐藏创建的列，但无济于事

【问题讨论】：

可能是sm 类而不是md？
试过 @makshh ，但似乎只是在 sm 断点重复崩溃。

标签： twitter-bootstrap pug

【解决方案1】：

原因是当您尝试将其放入 900px 时，它会检测到它应该针对手机或平板电脑进行更改。这是 Bootstrap 的特别之处，它会为您调整所有内容的大小，因此您不必编写媒体查询。最简单的方法是，指定当屏幕变“小”时您想要多少列，因此使用col-sm-*

解决它的最简单方法是在您的 col-md-* 旁边嵌入一个 col-sm- 'size you want from 1 to 12'

【讨论】：

我在每个 sm 断点上都有大小，但在小断点处仍然看到这 1 列细分
其实我意识到了......我需要明确隐藏每个级别

【解决方案2】：

在修修补补之后我意识到......当你在引导程序中隐藏东西时，你必须明确地调出你想要隐藏的每个级别。

您在我的屏幕截图中看到的内容...处于非常小的（又名xs）级别...我以为我隐藏的所有内容都塞回渲染视图中。呸

修复示例：

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

【讨论】：