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

正如您的问题中所解释的，引导程序中的查询从宽度和向上开始，因为它们是我们使用 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*/

}