5分钟。X, pro，基石

根据设备大小隐藏或显示内容

在这篇文章中，我们将解释如何使用X和Pro主题的隐藏/显示元素特性来实现响应式网站。

响应式设计在当今的网页设计世界中是必要的，在众多设备上呈现您的网站的最佳版本可能是一个巨大的挑战。虽然X和Pro的许多部分都是开箱即用的，但您可能会遇到在不同设备上仅通过调整行或网格的总体布局就无法实现特定设计更改的情况。

断点隐藏控制

构建器有一个选项，可以根据用户的屏幕大小隐藏和显示元素。这些控件使您有机会隐藏不太适合的元素，或者您可能需要在某些屏幕尺寸上完全替换。这个控件可以在下面找到:

上面的截图显示了“在断点期间隐藏”控件。该控件中表示的大小如下所示:

注意:虽然这个功能在大多数element上都是可用的，但也有例外。例如,原始内容没有包装div，因此无法附加断点控件。请参阅下面的部分，了解如何使用helper类在元素不支持的地方或其他不可用的地方利用此功能。

在工具栏中，单击移动设备图标以切换预览切换器。你会看到下面的切换器出现在现场预览:

单击这些设备图标中的任何一个将调整实时预览画布到该断点的最小宽度。例如，如果您选择了医学博士断点，实时预览画布的宽度将被设置为767 px．

注意:这是可能的XL断点选定，但实际上是看到LG(或更小)断点，因为您的屏幕宽度低于1200 px．为了避免这种情况，尝试使用缩放设置或切换到更大的显示器来增加浏览器的大小。

这个特性很有用的一种情况是在桌面上使用内联导航，在移动端使用可切换菜单。你可以按照下面的说明来做:

在Header中，添加一个新的栏并向栏中添加两个容器。为了方便，双击Container标题重命名元素。我们称它们为“移动容器”和“桌面容器”。在它们各自的容器中添加以下元素:

检查“移动容器”并导航到定制控制。单击“在断点期间隐藏”控件的前三个断点图标:

你会注意到内联导航因为它各自的容器是隐藏的。接下来，检查“桌面容器”并导航到定制控制。单击最后两个断点图标来隐藏容器的大小:

此时，在任何给定的屏幕大小下，您将只能看到其中一个容器，并为每个设备输出适当的导航模式。

X和Pro还包括可以在任何HTML标记中使用的helper类。这五个类分别对应五个不同的断点大小:

下面是一个使用它来隐藏自定义的示例div在XL而且LG断点:

看到不准确的东西了吗?让我们知道