twitter bootstrap .hidden-lg less 不工作答案

【问题标题】：twitter bootstrap .hidden-lg less not workingtwitter bootstrap .hidden-lg less 不工作
【发布时间】：2014-04-17 22:06:58
【问题描述】：

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Title</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" type="text/css" href="./assets/css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="./assets/css/bootstrap.css" />
        <script src="./assets/js/less.js" type="text/javascript"></script>
    </head>
    <body>

        <div class="header-container">
            <header class="wrapper clearfix">
                <h1>Header</h1>
                <nav>
                    <ul>
                        <li><a href="#">nav ul li a</a></li>
                        <li><a href="#">nav ul li a</a></li>
                        <li><a href="#">nav ul li a</a></li>
                    </ul>
                </nav>
            </header>
        </div>

        <div class="main-container">
            <div class="promo-pod">
                <p>Promo pod Promo pod Promo pod Promo pod</p>
                <p>Promo pod Promo pod Promo pod Promo pod</p>
                <p>Promo pod Promo pod Promo pod Promo pod</p>
                <p>Promo pod Promo pod Promo pod Promo pod</p>
                <p>Promo pod Promo pod Promo pod Promo pod</p>
            </div>

        </div> <!-- #main-container -->

        <div class="footer-container">
            <footer class="wrapper">
                <h3>Footer</h3>
            </footer>
        </div>

        <!-- Le javascript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <!--<script src="assets/bootstrap/js/bootstrap.js"></script>-->
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
    </body>
</html>

隐藏宣传片的我的更少：

.main-container {

    .container();
    .make-row();

    .main.wrapper {
        .make-column(12);
    }

    .promo-pod {
        border:1px solid red;
        .hidden-lg;
        .make-column(3);
    }
}

我决定将 div class="promo-pod" 更改为 div class="span4 hidden-lg" 并隐藏了 div，但是当它只是 div class="promo-pod" 时，所有规则都适用，除了.hidden-lg;

每次我保存文件时，less 文件都会正确编译，感谢任何帮助。

把名字改成了promo，如，很长，所以在这个gist中搜索promohttps://gist.github.com/anonymous/6174366

【问题讨论】：

你能从编译好的 bootstrap.css 文件中发布 .promo-pod 样式吗？这可能有助于我们调试问题。
如果可以的话，尽量找出问题，而不是发布整个 HTML 文档。

标签： html css twitter-bootstrap less

【解决方案1】：

注意：自 2013 年 8 月起，此问题已在 Bootstrap 中修复，因此不再需要以下解决方法。 (https://github.com/twbs/bootstrap/pull/9211)

Bootstrap 的响应式 mixin 并不是为处理您想要完成的任务而构建的。

查看responsive-utilities.less 和mixins.less，您会发现响应式实用程序类（.hidden-lg、.visible-lg 等）实际上不包含任何@media 查询，因此将它们嵌入到您的CSS 不会让它们响应屏幕大小的变化。要使这些类正常工作，需要将它们直接添加到您的 HTML 中。

但作为一种解决方法，您可以从 responsive-utilities.less 复制 Bootstrap 的 @media 查询，并直接将可见性混合应用到您的样式中：

.promo-pod {

    /* Turn element off for all screens */
    .responsive-invisibility();

    /* Turn element back on for large screens */
    @media (min-width: @screen-desktop) {
        .responsive-visibility();
    }

}

这不是一个完美的解决方案，但它是你能做的最好的，除非 Bootstrap 重新架构其可见/隐藏样式。

编辑（替代解决方案）：

如果您想按照最初的要求直接在 CSS 中使用 .visible-sm、.visible-lg 等，然后将此 sn-p 添加到您的 LESS 文件中：

.visible-sm {
  .responsive-visibility();
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-invisibility(); }
  @media (min-width: @screen-desktop) { .responsive-invisibility(); }
}
.visible-md {
  .responsive-invisibility();
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-visibility(); }
  @media (min-width: @screen-desktop) { .responsive-invisibility(); }
}
.visible-lg {
  .responsive-invisibility();
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-invisibility(); }
  @media (min-width: @screen-desktop) { .responsive-visibility(); }
}

.hidden-sm {
  .responsive-invisibility();
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-visibility(); }
  @media (min-width: @screen-desktop) { .responsive-visibility(); }
}
.hidden-md {
  .responsive-visibility();
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-invisibility(); }
  @media (min-width: @screen-desktop) { .responsive-visibility(); }
}
.hidden-lg {
  .responsive-visibility();
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-visibility(); }
  @media (min-width: @screen-desktop) { .responsive-invisibility(); }
}

那么你可以这样做：

.promo-pod {
  .visible-lg;
}

这只是对 responsive-utilities.less 的 Bootstrap 响应式实用程序的重组。（我可能会向 Bootstrap 添加一个拉取请求，看看是否可以将这样的东西拉入主分支。）

【讨论】：