我正在尝试使用Bootstrap的自定义表单范围,尽管它的拇指不工作,即使我导入scss/_bootstrap.scss
清单文件。只有在导入了dist/bootstrap.css
或者我正在使用CDN时,它才起作用。
这是我用于导入Bootstrap文件的清单文件:
// Required abstracts
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/mixins";
/*----------------------------- OPTIONAL -----------------------------*/
// abstract
@import "../../../node_modules/bootstrap/scss/utilities/display";
@import "../../../node_modules/bootstrap/scss/utilities/flex";
// base
@import "../../../node_modules/bootstrap/scss/reboot";
@import "../../../node_modules/bootstrap/scss/type";
@import "../../../node_modules/bootstrap/scss/code";
// layout
@import "../../../node_modules/bootstrap/scss/grid";
//components
@import "../../../node_modules/bootstrap/scss/card";
@import "../../../node_modules/bootstrap/scss/forms";
@import "../../../node_modules/bootstrap/scss/custom-forms";
这是我的HTML代码:
<input id='quantity'
class='custom-range'
type='range'
min='12'
max='18'
step='2'
value='12'>
导入这些文件后,range thumb将不会按预期设置样式(它会保持浏览器的默认样式)。
发布于 2019-02-27 23:13:24
如果您正在使用WebCompiler extension for Visual Studio并正在编译Bootstrap Sass文件,则需要在compilerconfig.json中添加对Autoprefixer的支持:
{
"outputFile": "wwwroot/css/site.css",
"inputFile": "wwwroot/css/site.scss",
"options": {
"autoPrefix": "last 2 versions"
}
}
https://stackoverflow.com/questions/54329658
复制相似问题