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

Posted 2023-03-06

【中文标题】Bootstrap @media 并在屏幕大小上更改 css

【英文标题】：Bootstrap @media and changing css on screensize

【发布时间】：2016-09-08 20:39:45

【问题描述】：

我查看了有关如何更改 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%;
  

【参考方案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*/

【讨论】：

我认为我使用它是正确的，谢谢，但是它似乎不起作用，知道为什么它可能无法调整大小，我正在使用 css：bootstrap.min.css。

这是 Less 变量，你用的是 Less 吗？

更少？你的意思是？我相信是的，我有 min bootstrap 样式表，我只是尝试复制你那里的内容，但它没有调整大小。

@SheaLavington 我已经更新了我的答案。 LESS 是一个 CSS 预处理器