Question

所以，我把它煮到了最低限度。就我所知，一些bootstrap mixins只是不起作用。特别是.make-md-column（）和.make-sm-column（）flat似乎没有做任何事情。

起初，我认为WebEssentials没有正确编译.less文件，所以我开始只使用less.js并在客户端进行编译。仍然没有爱

因此，在下面的页面中，标签Span1和Span2以中等大小显示在2列中，在较小视图中显示为1列。

基于我的.less，我认为跨度3和4应该完全相同（除了绿色 - 我补充说只是为了确保有些事情发生）Spans 3和4从不进入2列。我在这里做错了什么？


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

，这是

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

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

Answer 1

最小到最大

make-xx-column(X)来电的顺序非常重要。你的代码：

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

为媒体查询生成此CSS：

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

按此顺序，CSS选择器的级联对您不利，因为768px最小值是之后的<{em> 992px，所以当您说1000px时1}}，两个媒体查询块都适用，因为两者都在该数字下，但css级联选择最后一个定义的，始终为768px（单列）。 SEE EXAMPLE FIDDLE WITH THIS ORDER.所以你需要这个：

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

为媒体查询生成此CSS：

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

现在，在1000px 992px适用，但如果它低于992px，则min-width条件会阻止该应用，768px } 接手。 SEE EXAMPLE FIDDLE WITH THIS ORDER.

因此，make-xx-column(X)来电的顺序必须从最小到最大。

bootstrap make-xx-column（）mixins无效

1 个答案:

最小到最大