CODEWITHSUNDEEP
csstwitter-bootstrapless
JMarsch
JMarsch

Reputation: 21753

bootstrap make-xx-column() mixins are not working

So, I've boiled this down to just the bare minimum. As nearly as I can tell, some bootstrap mixins are just not working. Specifically .make-md-column() and .make-sm-column() flat don't seem to do anything.

At first, I thought it was WebEssentials not compiling the .less file correctly, so I kicked over to just using less.js and compiling on the client-side. Still no love

So in the page below, the labels Span1 and Span2 appear in 2 columns at medium size and in 1 column on smaller views.

Based on my .less, I think taht spans 3 and 4 should be exactly the same (except green -- I added that just to be sure that something was coming through) Spans 3 and 4 never go 2-column. What am I doing wrong 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

    @import (reference) 'bootstrap/bootstrap.less';
//@import 'bootstrap/bootstrap.less';

.div-container {
    color: green;
    .make-md-column(6);
    .make-sm-column(12);
}

Upvotes: 2

Views: 2820

Answers (1)

ScottS
ScottS

Reputation: 72261

Smallest to Largest

The order of your make-xx-column(X) calls is important. Your code:

.div-container {
    color: green;
    .make-md-column(6);
    .make-sm-column(12);
}

Generates this CSS for the media queries:

@media (min-width: 992px) {
  .div-container {
    float: left;
    width: 50%;
  }
}
@media (min-width: 768px) {
  .div-container {
    float: left;
    width: 100%;
  }
}

In this order, the cascade of the CSS selectors is working against you, because the 768px minimum is after the 992px, so when you are at say 1000px, both media query blocks apply since both are under that number, but the css cascade chooses the last one defined, which will always be 768px (single column). SEE EXAMPLE FIDDLE WITH THIS ORDER. So you need this:

.div-container {
    color: green;
    .make-sm-column(12); /* reversed order */
    .make-md-column(6);
}

Generates this CSS for the media queries:

@media (min-width: 768px) {
  .div-container {
    float: left;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .div-container {
    float: left;
    width: 50%;
  }
}

Now, at 1000px the 992px applies, but if it drops below 992px, then the min-width condition prevents that one from applying, and the 768px takes over. SEE EXAMPLE FIDDLE WITH THIS ORDER.

So the order of your make-xx-column(X) calls must be from smallest to largest.

Upvotes: 4

Related Questions