1 
<!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中搜索promo https://gist.github.com/anonymous/6174366

4

1 回答 1

6

注意：截至 2013 年 8 月，这已在 Bootstrap 中修复，因此不再需要以下解决方法。（https://github.com/twbs/bootstrap/pull/9211）

Bootstrap 的响应式 mixin 并不是为了处理你想要完成的事情而构建的。

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

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

.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等，请将此代码段添加到您的 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;
}

它只是对 Bootstrap 的响应式实用程序从responsive-utilities.less. （我可能会向 Bootstrap 添加一个拉取请求，以查看是否可以将此类内容拉入主分支。）

于 2013-08-07T14:31:10.317 回答