Question

<!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;

每次保存文件时，较少的文件都会正确编译，任何帮助都会受到赞赏。

将名称更改为促销，因为很长，所以在此要点中搜索促销https://gist.github.com/anonymous/6174366

Answer 1

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

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

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

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

.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; }

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

twitter bootstrap .hidden-lg less less not working

1 个答案: