html - 跨视口(viewport)断点切换内容的问题

Question

我在尝试让 hidden-xs 和 visible-xs-* 工作时遇到问题。甚至像这样简单的事情:

    <div class="hidden-xs">
        test test test
    </div>

即使使用该代码，我也将窗口缩小到最小，但它仍然没有消失。我正在使用 LESS 编译版本，但我还没有更改 variables.less 中的任何内容。有人有什么想法吗？

此外，在一个有点相关的问题中，我尝试在我的 mystyles.less 中使用“@media (min-width: @screen-sm-min)”媒体查询，它被导入到我的 bootstrap.less 但我的 pre -处理器(考拉)不喜欢变量@screen-sm-min。它给了我错误:

NameError: variable @screen-sm-min is undefined in C:\Users\Shawn\Dropbox\GPLndscapes wordpress\less\mystyles.less:18:19
17 
18 @media (min-width: @screen-sm-min){
19     .navbar .navbar-nav {

是我的 less 设置错误还是考拉？

Answer 1

问题是我使用的 LESS 发行版(我从 getbootstrap.com 下载的发行版)没有用于隐藏和可见的 css。我通过使用 dist 文件夹中的 bootstrap.css 发现它有效。

我查看了 LESS 文件，它有这一行:

@border-image: port "responsive-utilities.less";

我继续添加:

@import "responsive-utilities.less";

现在它可以工作了，任何人都知道@border-image: port 的作用以及为什么他们会使用它而不是标准导入？我不愿意删除它，因为我不知道它的作用，我想知道他们是否出于某种原因使用它。

还有关于@screen-sm-min 的问题，我只想说 Koala 只查看少了一个文件，并没有看到它被导入到一个大的 Bootstrap 文件中。我会尝试其他预处理器并希望好运。