twitter-bootstrap – 如何在不修改核心文件的情况下修改Bootstr

发布时间：2020-12-18 00:22:13 所属栏目：安全来源：网络整理

导读：我不是Bootstrap默认断点1200px for screen-lg的粉丝.有没有什么方法可以让它成为lg断点发生在1800px或沿着那些线？我不想修改原始的Bootstrap css代码,因为我正在使用bower,每次运行bower update时,我都会丢失我的更改. 我知道我应该能够覆盖Bootstrap的默

我不是Bootstrap默认断点1200px for 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>

解决方法

您可以通过运行：Less(也是我期望的SASS)和 commandline Lessc compiler来执行此操作：

lessc --modify-var='screen-lg=1800' --modify-var='container-large-desktop=1770' --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6' bootstrap.less ../dist/css/bootstrap.css

在上面1770 = 1740天沟大小.

请注意,您不仅需要使用npm install less安装Less编译器,还需要使用npm install less-plugin-autoprefix安装Less autoprefixer plugin.

以上将保证Bootstrap将编译为与默认构建过程相同的代码.当然,您还可以在运行上面的lessc命令时设置sourcemap和compress选项.

您遇到的最佳解决方案取决于如何编译Bootstrap.
由于您使用的是Bower,您还应该看看https://www.npmjs.com/package/less-plugin-bower-resolve. Less编译器的这个插件可以帮助您从Bower包导入Less文件.这为您提供了另一种解决方案.

创建一个新的less文件site.less并将以下Less代码写入其中：

@import "bootstrap/less/bootstrap";
@screen-lg:                  1800px;
// Large screen / wide desktop
@container-large-desktop:      (1740px + @grid-gutter-width);

现在,您可以使用以下命令编译site.less：

lessc --bower-resolve -autoprefix="Android 2.3,Safari >= 6' site.less site.css

由于Less用途lazy loading,之后可以覆盖@ screen-lg和@ container-large-desktop.

在阅读了@zangrafx和@mijopabe关于这个问题的答案后,我也想知道在将最大断点设置为更宽的宽度时你会有什么期望.
在默认情况下会发生以下情况：

对于宽度大于992px的屏幕,.container类的宽度变为970px;对于宽度大于1200px的屏幕,.container类的宽度为1170像素.当您部署上面给出的解决方案时,.container类的宽度变为970px,屏幕尺寸从992px到1800px,屏幕尺寸宽度超过1800px时为1770像素.您可能不是在寻找能够改变最大断点的解决方案,而是寻找adds a larger grid to Bootstrap的解决方案.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!