我的问题：

Question

我继承了一个使用Bootstrap 3作为其框架的Web应用程序，并通过推荐的_custom-variables.scss方法应用了一些基本的自定义。官方SASS端口作为依赖项添加，并在app.scss和@import "bootstrap";之后使用_custom-variables.scss包含在_custom-mixins.scss文件中。

流量宽度应用程序将无法在小屏幕上使用（由于显示的数据量很大），因此我想禁用或删除CSS中的-xs-和-sm-断点。布局将针对-lg-和-md-断点进行优化，其中-md-是最窄的断点。

在_custom-variables.scss中，我更改了$container-tablet宽度：

// Small screen / tablet
$container-tablet:             (720px + $grid-gutter-width) !default;
//** For `$screen-sm-min` and up.
$container-sm:                 $container-tablet !default;

// Medium screen / desktop
$container-desktop:            (940px + $grid-gutter-width) !default;
//** For `$screen-md-min` and up.
$container-md:                 $container-desktop !default;

为：

// Small screen / tablet
$container-tablet:             (940px + $grid-gutter-width) !default;
//** For `$screen-sm-min` and up.
$container-sm:                 $container-tablet !default;

// Medium screen / desktop
$container-desktop:            (940px + $grid-gutter-width) !default;
//** For `$screen-md-min` and up.
$container-md:                 $container-desktop !default;

我还在包含整个布局的父min-width: $container-md;上设置了<div>。

只要我在HTML元素上包含不需要的断点的类，这就可以工作。例如，以下内容保持列宽为25％：

<div class="col-xs-3 col-sm-3 col-md-3">

但是，当浏览器缩小到992px（width <div>的值时，省略较小的断点类将删除min-width属性，-md-默认为宽度100％断点）。

我的问题：

为什么我需要在容器上指定其他更小的断点类？（我的Bootstrap技能生锈了！）
是否有更好的方法可以删除/禁用两个较小的断点？

Answer 1

您只需更改container宽度，这就是您必须指定较小断点类的原因。

尝试更改断点本身：

@screen-md:                  1px;
@screen-md-min:              @screen-md;

您应手动指定container的最小宽度：

@media (min-width: 1px) {
  .container {
    width: 970px;
  }
}

CODEPEN

Answer 2

因为我在app.scss中单独引用了我需要的每个Bootstrap部分，所以我采用了类似的方法来处理主题Bootstrap时如何应用自己的变量。

我制作了bootstrap/grid.scss的副本，并将其命名为bootstrap/custom-grid.scss
在app.scss中，我将对bootstrap/grid.scss的引用换成bootstrap/custom-grid.scss
在bootstrap/custom-grid.scss内删除了以下行：

...

@media (min-width: $screen-sm-min) {
    width: $container-sm;
}

@include make-grid(xs);


@media (min-width: $screen-sm-min) {
    @include make-grid(sm);
}

@media (min-width: $screen-md-min) {
    @include make-grid(md);
}

从Bootstrap 3中删除断点

我的问题：

2 个答案:

CODEPEN