Question

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

/* 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构建了移动优先方法，所以要实现你想要的，你必须这样：< / p>

/* 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*/

}

引导@media并在屏幕大小上更改css

1 个答案: