Twitter的引導.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>

我少隱藏促銷-POD：Twitter的引導.hidden-LG少不工作

.main-container { 

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

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

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

我決定DIV CLASS = 「促銷-POD」改爲DIV CLASS =「span4隱藏-LG」，它藏在div，但是當它僅僅是DIV CLASS =‘促銷吊艙’，所有的規則適用於除.hidden-LG;

文件少正確編譯每次我保存文件，任何幫助表示讚賞。

更名爲促銷，在很長的，所以在這個要點搜索促銷https://gist.github.com/anonymous/6174366

來源

2013-08-06 Brad

你可以張貼從編譯bootstrap.css文件.promo-POD的風格？這可能有助於我們調試問題。 – Zac

嘗試，而不是隔離張貼整個HTML文檔，如果可以的問題。 – william44isme

注：爲2013年8月，這已被固定在引導，所以下面的解決方法是不再必要。（https://github.com/twbs/bootstrap/pull/9211）

Bootstrap的響應混合函數不是用來處理你正在嘗試完成的。

閒逛在responsive-utilities.less和mixins.less，你會看到，響應實用工具類（.hidden-lg，.visible-lg等）實際上並不包含任何@media查詢，因此它們嵌入在你的CSS不會讓他們做出反應屏幕大小的變化。要使這些類正常工作，需要將它們直接添加到HTML中。

但作爲一種變通方法，可以從responsive-utilities.less複製引導的@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(); 
    } 

}

這不是一個完美的解決方案，但它是你可以做的，除非引導最佳重新構建它們的可見/隱藏樣式。

編輯（替代解決方案）：

如果您想直接在你的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激活實用程序。（我可能會增加pull請求來引導，看看這樣的事情可以被拉入master分支）。

來源

2013-08-07 14:31:10 Zac

Twitter的引導.hidden-LG少不工作

回答

相關問題