相关疑难解决方法(0)

禁用LESS-CSS覆盖calc()

现在我在我的LESS代码中尝试在CSS3中执行此操作:

width: calc(100% - 200px);
Run Code Online (Sandbox Code Playgroud)

但是,当LESS编译时,它输出:

width: calc(-100%);
Run Code Online (Sandbox Code Playgroud)

有没有办法告诉LESS不要以这种方式编译并正常输出?

css css3 less css-calc

427
推荐指数
5
解决办法
10万
查看次数

是否可以在CSS calc()中使用vh减去像素?

我在Less文件中有以下CSS规则:

.container {
  min-height: calc(100vh - 150px);
}
Run Code Online (Sandbox Code Playgroud)

这根本不起作用.我想让容器全窗口高度和负头,页脚固定高度.

我怎样才能做到这一点?

css less

105
推荐指数
1
解决办法
12万
查看次数

CSS3 calc(100%-88px)无法在Chrome中运行

我注意到我使用CSS3 calc()功能作为单位width在最新版本的Chrome中无效.

在Chrome开发者工具中,规则通过它calc()有一个删除线,并在其左侧有一个黄色三角形中的感叹号.这表明财产或价值未被识别.

如何让它在现代浏览器中运行?因为它是一个值而不是一个属性,所以供应商前缀在哪里?

更新:

当我说它不起作用时,我的意思是Chrome Dev Tools说它没有认识到我对它的使用width: calc(100%-88px);.我怎么知道它没有认出来?由于chrome开发工具中样式规则旁边的删除线和黄色三角形图标.

css google-chrome css3

63
推荐指数
3
解决办法
5万
查看次数

有没有办法在Less中为〜运算符使用变量,比如〜"calc(100% - @spacing)";

有没有办法在less ~运算符中使用变量,比如

~"calc(70% - @spacing)";
Run Code Online (Sandbox Code Playgroud)

当我尝试它时,它只适用于静态值,如

 ~"calc(70% - 10px)";
Run Code Online (Sandbox Code Playgroud)

我可以在设置为属性之前获取要评估的字符串.

css3 less css-calc

58
推荐指数
1
解决办法
2万
查看次数

修复了bootstrap 3模式中的标题位置

我想在我的Bootstrap模式中使用固定的标头,但是如果我将.modal-header设置为position:fixed它会随着moda内容一起滚动.如何在BS模式中创建trully固定标头?

css modal-dialog twitter-bootstrap

26
推荐指数
2
解决办法
3万
查看次数

Twitter Bootstrap 3 Modal with Scrollable Body

我正在从Bootstrap 2转移到Bootstrap 3.在旧版本中,我使用的是具有长内容的模态,并且当达到给定的最大高度时,模态会自动滚动.

在Bootstrap 3中,模式只是扩展以显示整个内容,我必须使用向下翻页键实际到达它的末尾并查看模态页脚中的按钮.我无法使用浏览器窗口最右侧的滚动条,因为它被背景覆盖,并且在任何情况下都不能直观地滚动模式框中的内容.

如何在bootstrap 3中实现一个模态,在达到最大高度时自动插入滚动条滚动内容?

我尝试将max height设置为模态类,如下所示:

.modal{
   max-height:80%;
}
.modal-header{
   height:15% !important;    
}
.modal-body{
   height:70%;
   overflow:auto;
}
.modal-footer{
   height:15%;
}
Run Code Online (Sandbox Code Playgroud)

但它没有按预期工作.模态窗口确实达到了最大尺寸,但它只是在那里削减了内容,甚至没有显示页脚.

谢谢你的帮助.

css modal-dialog twitter-bootstrap twitter-bootstrap-3

24
推荐指数
1
解决办法
5万
查看次数

使用Less,CSS3 calc()无法正常工作

当我calc(100% + 20px)在Chromes和Firefox的Inspector中直接使用它时,它可以正常工作,如图所示.

但是当我将它插入到我的less文件中时,它会被转换为120%.我究竟做错了什么?

css css3 less

11
推荐指数
1
解决办法
6447
查看次数

calc例程使用较少

有没有办法使用较少的css calc()例程?

如果我去http://less2css.org/ 并输入以下输入(这只是一个常规的CSS规则):

width: calc(100% - 450px);
Run Code Online (Sandbox Code Playgroud)

输出应该完全相同(因为它是常规的css)但是,

编译器产生的css输出是 width: calc(-350%);

有没有办法让这个工作?

css css3 less css-calc

10
推荐指数
1
解决办法
4075
查看次数

Css3 calc减去带有像素的vh

.wrap {
    height: calc(100vh - 50px);
}
Run Code Online (Sandbox Code Playgroud)

这不行.我得到了50vh的输出.有什么地方我可以用vh减去像素吗?

css sass css3 less

10
推荐指数
1
解决办法
4万
查看次数

将原生 CSS 最小/最大函数与 LESS 结合使用

我想将min() CSS 函数与用 LESS 编写的样式表一起使用。然而,LESS 有自己的 min 和 max 函数来预先计算值(使得混合和匹配单位变得不可能)。我如何获得它,以便输出 CSS 具有我编写的最小/最大函数?

这是 LESS 文件中的样式,这也应该是预期的输出。

canvas {
    background: white;
    width: min(95vh, 95vw);
    height: min(95vh, 95vw);
}
Run Code Online (Sandbox Code Playgroud)

我使用 lessc 3.13.1,它会产生以下错误:

ArgumentError: error evaluating function `min`: incompatible types in <snipped> on line 49, column 12:
48     background: white;
49     width: min(95vh, 95vw);
50     height: min(95vh, 95vw);
Run Code Online (Sandbox Code Playgroud)

css less

7
推荐指数
1
解决办法
1323
查看次数