Twitter Bootstrap .hidden-LG менее не работает

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

Мои меньше для сокрытия промо-стручка:Twitter Bootstrap .hidden-LG менее не работает

.main-container { 

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

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

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

Я решил изменить Div класс = "промо-стручок" для сНа класса = "span4 скрытых -lg ", и он спрятал div, но когда это просто div class =" promo-pod ", применяются все правила, кроме как .hidden-lg;

Чем меньше файлов компилируется каждый раз при сохранении файла, любая помощь оценивается.

не изменил название на акции, как, очень долго, так что поиск промо в этой сутью https://gist.github.com/anonymous/6174366

источник

2013-08-06 Brad

Можете ли вы опубликовать стили .promo-pod из скомпилированного файла bootstrap.css? Это может помочь нам отладить проблему. – Zac

Попробуйте изолировать проблему, а не размещать весь HTML-документ, если сможете. – william44isme

Примечание: по состоянию на август 2013 года, это было исправлено в Bootstrap, поэтому ниже обходные больше не необходимо. (https://github.com/twbs/bootstrap/pull/9211)

Реактивные смесители Bootstrap не предназначены для обработки того, что вы пытаетесь выполнить.

копаться в responsive-utilities.less и mixins.less, и вы увидите, что реагирующие классы полезности (.hidden-lg, .visible-lg и т.д.) на самом деле не содержат каких-либо запросов @media, поэтому вложение их в CSS не заставит их ответить для изменения размера экрана. Чтобы эти классы работали должным образом, их необходимо добавить непосредственно в свой HTML.

Но как решить эту проблему, вы можете скопировать @media запросов Bootstrap от 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 backchitects их видимые/скрытые стили.

Edit (альтернативное решение):

Если вы хотите использовать .visible-sm, .visible-lg и т.д. прямо в CSS, как вы первый спросил, а затем добавить этот фрагмент в свой МЕНЬШЕ файл:

.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-07 14:31:10 Zac

Twitter Bootstrap .hidden-LG менее не работает

ответ

Смежные вопросы