代码之家 › 专栏 › 技术社区 › FarukT

引导网格的Mediaquery

twitter-bootstrap-3 twitter-bootstrap css html

FarukT · 技术社区 · 7 年前

所以,我的问题是网格系统。我有两台显示器,第一台分辨率为1920x1080,第二台分辨率为1366x768。我想说,如果分辨率是1366x768,请使用md而不是lg的网格系统

例如,我有一个div,如下所示

<div class="col-lg-9 col-md-6">
....
</div>

div class="col-lg-3 col-md-6">
...
</div>

有可能吗?

2 回复 | 直到 7 年前

Nav Raj Bhattarai 7 年前

https://getbootstrap.com/docs/3.3/css/#overview-container (用于引导程序3)。

https://getbootstrap.com/docs/3.3/customize/ 然后向下滚动,您将找到“媒体查询断点”部分。您可以从那里自定义自己的断点,方法是 只需用1920px填充@screen lg标记的输入框,用1366px填充@screen md标记的输入框。现在您可以转到本页的底部,然后简单地单击commpile和download按钮。 现在您可以使用这个下载的引导文件,它可能对您有用。同样,你可以通过编辑这些较小的变量来定制你想要的每一件事。

-1

Bojan Kolano 7 年前

if (window.matchMedia('(min-width: 1025px )').matches) {
    high.css('height', maxheight - 3);
    boxOne.css('height', maxheight);
    boxTwo.css('height', maxheight);
    boxThree.css('height', maxheight + 23);
  }
  else if (window.matchMedia('(min-width: 768px) and (max-width: 1024px)').matches) {
    high.css('height', maxheight - 11);
    boxOne.css('height', maxheight);
    boxTwo.css('height', maxheight);
    boxThree.css('height', maxheight + 23);
  }

推荐文章