Cap*_*ack 8 twitter-bootstrap twitter-bootstrap-3
我不是Bootstrap默认断点1200px的粉丝screen-lg.有什么方法可以让它成为lg断点发生在1800px或沿着这些线的东西？我不想修改原始的Bootstrap css代码,因为我正在使用bower,而且每次运行时bower update,我都会丢失我的更改.
我知道我应该能够覆盖Bootstrap的默认值,虽然使用grunt,bower和Sass,我不知道如何去做.这是<head>块:
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/bootstrapvalidator/dist/css/bootstrapValidator.css" />
<link rel="stylesheet" href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="bower_components/card/lib/css/card.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/order-page.css">
<!-- endbuild -->
</head>
事实证明这比我想象的要容易得多。我发誓我以前尝试过这个，但没有成功，但也许我之前做错了什么。
在主 SCSS 文件的顶部，更改以下内容：
$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
// bower:scss
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower
对此：
$screen-lg-min: 1800px; /* $screen-lg is deprecated */
$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
// bower:scss
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower
@media screen and (min-width: 1800px) {
.container {
width: $new-breakpoint-container-width; /* to be defined above, of course */
}
}
但是，赏金点转到 Bass Jobsen 以获得最详细的答案，以及使用.grid-gutter-width
| 归档时间： |
|
| 查看次数： |
2822 次 |
| 最近记录： |