Question

对于screen-lg，我不是Bootstrap默认断点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>

Answer 1

您可以使用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编译器，还必须使用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,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6' site.less site.css

由于使用次数较少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的解决方案。

Answer 2

事实证明这比我想象的容易得多。我发誓我之前尝试过这个但是没有用，但也许我之前做错了。

在主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设置容器宽度的方法。

Answer 3

你可以通过bootstrap减少变量。如果您已下载bootstrap source files，则可以在文件夹中找到名为variables.less的文件。在文件中查找此文件

// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;

并将其更改为您指的任何屏幕尺寸。然后编译并获得结果。

Answer 4

如果您不想删除/编辑Bootstrap的默认文件，以便可以通过bower进行更新，则可以创建一个单独的CSS文件（custom-bootstrap.css），在Bootstrap之后包含它。因此，对于最大宽度为1800px，请将其包含在custom-bootstrap.css文件中：

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    max-width: 1800px; 
}

通过居中并水平设置最大宽度来覆盖Bootstrap中设置的容器 - 流体。

第二个选项（独立于第一个选项）是1）创建第二个主文件（less / scss），2）包括你想要保留Bootstrap的任何内容（所以所有响应文件都没有response-1200px-min。少/ SCSS）。这将运行你拥有的任何东西，3）然后根据需要编写自己的媒体查询1800px。

Answer 5

我要补充一点，您只需在main.css文件中添加一个额外的“断点”即可。这不会改变1200px断点，但会允许容器超过它。

像这样：

@media (min-width: 1800px) {
  .container {
    width: 1600px;
  }
}

HTH，

-Ted

Answer 6

您可以使用不同的Bootstrap方式。将文件bootstrap.less从原始位置复制到less文件夹并更改内部路径，如下面的示例所示，除了variables.less。

// Core variables and mixins
@import "variables.less";
@import "/bower_components/bootstrap/less/mixins.less";

// Reset and dependencies
@import "/bower_components/bootstrap/less/normalize.less";
@import "/bower_components/bootstrap/less/print.less";
...

现在将文件变量从原始位置复制到您的less文件夹，然后您可以修改所需的任何变量。

在新的bootstrap.css文件的html更改路径中：

<link href="/styles/bootstrap.css" rel="stylesheet">

在你的构建过程中编译/your_less/bootstrap.less（而不是/bower_components/bootstrap/less/bootstrap.less），它将从bower_components导入你自己的variables.less和所有其他orgiginal bootstrap文件。

您还可以将其他较少的文件（例如normalize.less）与您自己的文件交换。

我有这个版本，一切都适用于gulp，sourcemaps和browser-sync，当新版本可用时，我仍然可以在bower_files中更新bootstrap。

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

6 个答案: