html - 在 bootstrap v3.0.21 中我在哪里写我的响应样式

Question

我对新的 BS 有点困惑，它已经设置了样式。我需要编写一些响应式样式，并查看 grid.scss 文件中有大型、中型和小型媒体查询，这是我放置所有响应式样式的地方，但是当我在那里写它们时遇到了困难……它然后没有工作。大样式出现在小 View 中。大坝!

我的代码示例在这里:

// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
//
// Note that `.col-sm-12` doesn't get floated on purpose--there's no need since
// it's full-width.

@media (min-width: $screen-sm-min) {
  .container {
    background-image: url("../images/graphics/splash-mobile.png");
    background-repeat: no-repeat;
    width: 320px;
    min-height: 653px;
    margin-top: 45px;
  }
  .splash h1 {
    margin: 0 auto;
  }
  .splash h2 {
    font-size: 21px;
  }
  .splash h3, .splash p {
    padding-left: 10px;
    padding-right: 10px;
  } 

  .form-signin {
    margin-left: 3%;
    margin-right: 3%;
  }

  .splash .btn-block {
    border-radius: 0 3px 3px 0;
    font-size: 14px;
    padding-bottom: 9px;
    padding-top: 8px;
    width: 32%;
  }

  @include make-grid-columns-float(sm);
  @include make-grid($grid-columns, sm, width);
  @include make-grid($grid-columns, sm, pull);
  @include make-grid($grid-columns, sm, push);
  @include make-grid($grid-columns, sm, offset);
}


// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
//
// Note that `.col-md-12` doesn't get floated on purpose--there's no need since
// it's full-width.

@media (min-width: $screen-md-min) {
  .container {
    background-image: url("../images/graphics/splash-tablet.png");
    background-repeat: no-repeat;
    width: $container-md;
    min-height: 605px;
    margin-top: 45px;
  }
  .splash h3, .splash p {
    padding-left: 84px;
    padding-right: 90px;
  } 
  .form-signin {
    margin-left: 13%;
    margin-right: 13%;
    margin-top: 20px;
  }

  .splash .btn-block {
    border-radius: 0 3px 3px 0;
    font-size: 16px;
    padding-bottom: 7px;
    padding-top: 8px;
    width: 25%;
  }

  @include make-grid-columns-float(md);
  @include make-grid($grid-columns, md, width);
  @include make-grid($grid-columns, md, pull);
  @include make-grid($grid-columns, md, push);
  @include make-grid($grid-columns, md, offset);
}


// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
//
// Note that `.col-lg-12` doesn't get floated on purpose--there's no need since
// it's full-width.

@media (min-width: $screen-lg-min) {
  .container {
    width: $container-lg;
    min-height: 610px;
    background-image: url("../images/graphics/splash-browser.png");
    background-repeat: no-repeat;
    margin-top: 45px;
    padding:0;
  }
  .form-signin {
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 20px;
  }
  .row {
    margin-left: 0;
    margin-right: 0;
  }
  .splash .btn-block {
    border-radius: 0 3px 3px 0;
    font-size: 16px;
    padding-bottom: 7px;
    padding-top: 8px;
    width: 25%;
  }

  .splash h2 { margin-top: 93px; padding-right: 50px; }

  .splash h3, .splash p { padding-left: 35px; }

  .form-signin { padding-left: 35px; }

  @include make-grid-columns-float(lg);
  @include make-grid($grid-columns, lg, width);
  @include make-grid($grid-columns, lg, pull);
  @include make-grid($grid-columns, lg, push);
  @include make-grid($grid-columns, lg, offset);
}

我应该在这里写我的样式吗？

Answer 1

您不应该对 BS 文件进行更改。

创建一个新的 CSS 文件，将基本的媒体查询放在那里，并在引导 CSS 之后将其包含到您的页面中。这样一来，您的样式将取代 BS 样式，并且如果 BS 有可用的更新，您可以更新 BS 文件，而无需大量麻烦地复制粘贴您自己的样式。

所以创建ie。 own-styles.css 并将其包含在 bootstrap.css

之后

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

添加媒体查询

/* screen-lg */

@media (max-width: 1199px) { 
    /* screen-md */
}

@media (max-width: 991px) {
    /* screen-sm */
}

@media (max-width: 767px) {
    /* screen-xs */
}

@media (max-width: 480px) {
    /* screen-xs */
}

并在他们的地方写下你的风格。