After careful examination, it looks like some of the Bootstrap mixins are not functioning as expected. Specifically, the .make-md-column() and .make-sm-column() seem to have no effect at all.
Initially, I suspected that WebEssentials was not compiling the .less file properly, so I switched to using less.js and compiled on the client-side. However, the issue persisted.
In the example below, the labels Span1 and Span2 should display in two columns on medium-sized screens and one column on smaller screens.
Based on my .less code, I presumed that Span3 and Span4 would behave the same way (except for the color green, which I added to verify if anything rendered). Surprisingly, Spans 3 and 4 never adopt a two-column layout. Can anyone identify what may be incorrect here?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap/bootstrap.less" rel="stylesheet/less" type="text/css"/>
<link href="Content/testless.less" rel="stylesheet/less" type="text/css" />
<script src="Scripts/less-1.5.1.min.js"></script>
</head>
<body>
<div class="container">
<!-- this row uses no LESS-->
<div class="row">
<div class="col-sm-12 col-md-6">
<span>Span1</span>
</div>
<div class="col-sm-12 col-md-6">
<span>Span2</span>
</div>
</div>
<div class="row">
<div class="div-container">
<span>Span3</span>
</div>
<div class="div-container">
<span>Span4</span>
</div>
</div>
</div>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
And here's the less code snippet:
@import (reference) 'bootstrap/bootstrap.less';
//@import 'bootstrap/bootstrap.less';
.div-container {
color: green;
.make-md-column(6);
.make-sm-column(12);
}