Fatal编程技术网
  • twitter-bootstrap/
  • Twitter bootstrap 如何在不修改核心文件的情况下修改Bootstrap3中的断点？

Twitter bootstrap 如何在不修改核心文件的情况下修改Bootstrap3中的断点？

twitter-bootstrap twitter-bootstrap-3

Twitter bootstrap 如何在不修改核心文件的情况下修改Bootstrap3中的断点？,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,对于屏幕lg，我不喜欢Bootstrap的默认断点1200px。有没有什么方法可以使lg断点在1800px或类似的地方发生？我不想修改原始的引导css代码，因为我使用的是bower，任何时候运行BowerUpdate，我都会丢失所做的更改 我知道我应该能够覆盖引导的默认设置，尽管使用grunt、bower和Sass，我不知道如何去做。这是块： <head> <meta charset="utf-8"> <title>Test</title>

对于
屏幕lg
，我不喜欢Bootstrap的默认断点1200px。有没有什么方法可以使
lg
断点在1800px或类似的地方发生？我不想修改原始的引导css代码，因为我使用的是bower，任何时候运行
BowerUpdate
，我都会丢失所做的更改

我知道我应该能够覆盖引导的默认设置，尽管使用grunt、bower和Sass，我不知道如何去做。这是
块：

<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>


试验
您可以使用无引导变量。如果已下载引导，则可以在文件夹中找到名为
variables.less
的文件。请在文件中查找此文件

// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
然后编译并得到结果。

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

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

<link href="/styles/bootstrap.css" rel="stylesheet">
这将通过居中并水平设置最大宽度来覆盖引导中设置的容器流体

第二个选项（独立于第一个选项）是1）创建第二个主文件（less/scss），2）包括您希望从引导中保留的任何内容（因此所有没有responsive-1200px-min.less/scss的响应文件）。这将运行您所拥有的一切，3）然后根据需要为1800px编写您自己的媒体查询。

您可以以不同的方式使用引导。将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";
...
现在，将文件variables.less从原始位置复制到less文件夹中，您可以修改所需的任何变量

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

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

<link href="/styles/bootstrap.css" rel="stylesheet">
在构建过程中编译/your_less/bootstrap.less（而不是/bower_components/bootstrap/less/bootstrap.less），它将从bower_组件导入您自己的变量.less和所有其他原始引导文件

您还可以将其他less文件（如normalize.less）交换为您自己的文件

我有这个版本，所有东西都能与gulp、sourcemaps和browser sync配合使用，而且当新版本可用时，我仍然可以在bower_文件中更新引导程序。

您可以使用更少的（我希望也是SASS）和，通过运行：

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插件autoprefix
安装Less编译器

以上内容将保证引导将编译成与默认构建过程相同的代码。当然，您也可以在运行上面的lessc命令时设置sourcemap和compress选项

在您的情况下，最好的解决方案取决于如何编译引导。 因为您使用的是鲍尔，所以您还应该看看。这个用于Less编译器的插件可以帮助您从Bower软件包导入较少的文件。这为您提供了一种替代解决方案

创建一个新的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
可以在以后被覆盖

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

对于大于992px的屏幕，
.container
类的宽度变为
970px
，对于大于1200px的屏幕，
.container
类的宽度为1170像素。部署我上面给出的解决方案时，
.container
类的宽度对于从992px到1800px的屏幕大小为970px，对于大于1800px的屏幕大小为1770像素。可能您不是在寻找一个改变最大断点的解决方案，而是一个可以改变最大断点的解决方案。

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

像这样：

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

-泰德

事实证明这比我想象的要容易得多。我发誓我以前试过，但没用，也许我以前做错了什么

在主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的最详细答案，以及使用
网格槽宽度设置容器宽度的正确方法，我无法修改原始引导文件。我必须单独使用我自己的一个CSS/LESS文件。@为什么？如果你改变这个变量，它会在你的最终css上改变。请看我上面的问题。我正在使用bower，因此当我运行
bower update
时，我对核心引导文件所做的任何更改都将被覆盖。@CaptSaltyJack确定在less文件的第一个文件中添加less变量，然后在使用bower时，它将被覆盖在引导核心文件中。不幸的是，这比这更复杂。我已经对上面的问题进行了编辑。您只需导入
/bower\u组件/bootstrap/less/bootstrap.less
。不应替换variable.less文件，而应通过在其后放置定义来覆盖变量。请看：您的答案毫无意义，尽管添加一些CSS代码来覆盖引导程序确实有意义。请注意，.container流体已经占据了视口的100%。您应该更改在媒体查询中设置的
.container
类。所以CSS代码是o