如何使用Bootstrap 4 Beta在小屏幕上隐藏元素

Question

我刚从bootstrap 4 alpha转到beta版，但我现在无法弄清楚如何在小屏幕上隐藏元素。在alpha中，这是“隐藏的md-up”和“hidden-sm-down”，它的工作非常精彩。 “hidden-md-up”现在是“d-md-none”，但另一个我无法上班

<div class="d-md-block d-xs-none d-sm-none">Show on large screen only - NOT working for me</div>
<div class="d-md-none">Show on small screen only</div>

有什么想法吗？

Answer 1

稍作休息，一杯咖啡后来我想出来了：加上“d-none d-md-block”这样的课程就可以了。

<div class="d-none d-md-block">Show on large screen only works now</div>
<div class="d-md-none">Show on small screen only</div>

在Bootstrap 4 Documentation了解有关响应式显示实用程序的详情。

Answer 2

我只是将其添加为答案，因为评论太长了……这是对@Kian的回复。

由于DataTable [4]是“移动优先”，因此您从此处开始。

问题是，“您要在XS断点上显示此内容吗？”：

• 如果是，则不需要d- *类，因为它将在XS和所有尺寸上显示 更大。
• 如果否，则执行 If ds.Tables(0).Rows.Count() > 0 Then For Each fon As DataRow In ds.Tables(0).Rows For Each i As DataGridViewRow In Dgv.Rows If fon.Item(0) = Dgv.DataSource.Columns(0).Items.ToString() Then i.Cells("col_check").Value = True End If Next Next End If 。

当您移至下一个断点[SM]时，问自己：“我要在SM断点上显示此内容吗？”。

• 如果是，并且也在XS中显示，则没有更改。
• 如果是，并且XS被隐藏（使用IJavaScriptExecutor executor = (IJavaScriptExecutor)driver; executor.ExecuteScript("arguments[0].click();", element); ），那么您需要 bootstrap。
• 如果没有显示XS，则执行d-none。
• 如果没有，并且XS被隐藏，则没有更改。

对于每个d-none，如果显示属性不同于先前的/较小的d-sm-block，则重复冲洗一次

以下是一些示例：

d-sm-none

Here's a fiddle

Answer 3

我试图使用d属性在不同的断点处显示差异徽标，我尝试了d-none d- -block“，但是它不起作用，仅适用于d-none-。然后我意识到我正在将类应用于.img，因此您可以对任何元素使用d-none-*（隐藏），但是要显示元素d-*-block只能在div之类的包装元素中使用。 希望对您有所帮助。