个人中心
gpt4 book ai didi

twitter-bootstrap - 如何在不修改核心文件的情况下修改 Bootstrap 3 中的断点？

转载 作者：行者123 更新时间：2023-12-04 07:43:10 35 4
gpt4 key购买 nike

我不喜欢 Bootstrap 的 screen-lg 的默认断点 1200px|。 .有什么办法可以做到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 + gutter-size。

请注意，您不仅需要安装带有 npm install less 的 Less 编译器。 ，还有 Less autoprefixer plugin与 npm install less-plugin-autoprefix .

以上将保证 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,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6' site.less site.css
@screen-lg和 @container-large-desktop由于使用较少 lazy loading 可以在之后被覆盖.

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

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

关于twitter-bootstrap - 如何在不修改核心文件的情况下修改 Bootstrap 3 中的断点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27053033/

35 4 0
文章推荐： language-agnostic - 你如何使数学方程可读和可维护？
文章推荐： python - 检查列标题是否与 PYTHON 匹配
文章推荐： python - 跨pandas 数据框所有列的数学运算，无论其大小如何
文章推荐： language-agnostic - 如何表示遗传算法的路径？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com