Question

我对新的BS感到有点困惑，它已经设置了样式。我需要编写一些响应式样式，并且看到grid.scss文件中有大，中，小媒体查询，这是我放置所有响应式样式的地方，但是因为我在那里写它们而陷入困境...它然后没有工作。小视图中出现了大样式。坝！

我的代码示例如下：

// 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文件而无需大量的麻烦复制 - 粘贴你自己的风格。

所以创造即。 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 */
}

在那里添加媒体查询

{{1}}

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

我在bootstrap v3.0.21中在哪里编写响应式样式

1 个答案: