Question

我正在使用bootstrap 3和AngularJS，我有两个柱流体布局。

这两列的声明是这样的 -

<div class="chart col-md-8">...</div>
<div class="options col-md-4">...</div>

如果用户的浏览器窗口小于某个宽度，或者如果它们将其大小调整为小于某个宽度，我想隐藏选项列并使图表列占据屏幕的整个宽度。我该怎么做？

Answer 1

看这里：

如果您将.hidden-xs类添加到选项div，则对于额外的小型设备（＆lt; 768px）将无法看到它。找到适合您用途的课程。您可以使用单个或组合的可用类来跨视口断点切换内容。

<div class="options col-md-4 hidden-xs">...</div>

Answer 2

Bootstrap为此提供了specis帮助程序类。所以对于你的情况，它可以是：

<div class="chart col-md-8 col-xs-12">...</div>
<div class="options col-md-4 hidden-xs">...</div>

这意味着，当xs媒体查询被触发时，.options列将被隐藏，.chart将扩展为全宽（12列）。

Answer 3

<div class="chart col-md-8 col-xs-12">...</div>
<div class="options col-md-4 hidden-xs">...</div>

现在，当屏幕宽度小于768px时，图表将变为全宽

Answer 4

在CSS文件中，您可以隐藏图表div以获得指定的最大屏幕宽度：

@media ( max-width : 768px) {
    .chart {
        display:hidden;
    }
}

您可以设置所需的最大宽度以隐藏图表（以像素为单位）。但是，您可以使用标准引导类来隐藏许多设备所需的任何内容。

例如：