Bootstrap @media 并在屏幕尺寸上更改 css

Question

我查看了有关如何更改的引导程序信息css，但我仍然感到困惑。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

我的网站将在左侧和右侧以 20% padding 加载，但是当它进入平板电脑时，我希望它减少到 10%，然后移动 2%（稍微侧面还在）

我的 padding 基本上在页面的一侧留下空白，感谢您的帮助。

我的css目前是这样的，这是我从阅读中了解到的，谢谢！

@media (min-width: @screen-sm-min) {
  .content {
    padding-left: 20%;
    padding-right: 20%;
  }
}

Answer 1

正如您在问题中所解释的那样，bootstrap 中的查询从宽度开始，因为它们是我们使用 min-width 构建的移动优先方法，所以要实现您想要的，您有像这样：

/* Extra Small devices (Phones, 768px and down) */
@media (max-width:768px) { /*screen-xs-max Less variable*/
  .content {
    padding-left: 2%;
    padding-right: 2%;
  }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { /*screen-sm-min Less variable*/
  .content {
    padding-left: 10%;
    padding-right: 10%;
  }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { /*screen-md-min Less variable*/
  .content {
    padding-left: 20%;
    padding-right: 20%;
  }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { /*screen-lg-min Less variable*/

}

Bootstrap @media 并在屏幕尺寸上更改 css

Bootstrap @media and changing css on screensize

css

media-queries

twitter-bootstrap

twitter-bootstrap-3