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