根据屏幕大小/媒体查询更改 Bootstrap 列类属性

Posted

技术标签:

【中文标题】根据屏幕大小/媒体查询更改 Bootstrap 列类属性【英文标题】:Change Bootstrap column class attribute based on screen size/media query 【发布时间】:2015-10-07 02:51:41 【问题描述】:

我正在使用 Twitter 的引导程序,但遇到了问题。我正在使用网格系统,并且在我的 html 中使用了col-lg-6 类来创建两个宽度相等的不同列。见以下代码:

<div class="row">
<div class="row sameHeightCols">
        <div class="col-lg-6">
            <div class="contentBlock">
                <h3>Header</h3>
            </div>
        </div>
        <div class="col-lg-6">
            <h3>Header2</h3>
        </div>
    </div>
</div>

我遇到的问题是,当它达到某个屏幕尺寸时,它会中断,并且左侧块中的一些内容会消失。当屏幕大小在col-lgcol-md 之间时会发生这种情况。我想做的是更改特定屏幕尺寸的类,使其更改为这个。

<div class="col-lg-9">
    <div class="contentBlock">
      <h3>Header</h3>
    </div>
</div>
<div class="col-lg-3">
     <h3>Header2</h3>
</div>

这在带有媒体查询的 css 中是否可行?还是我需要使用javascript?任何帮助将不胜感激,因为我已经做了很多研究并且找不到解决方案。如果需要任何进一步的代码/信息,也请告诉我。

谢谢。

【问题讨论】:

【参考方案1】:

不,您不需要Java Script,您可以使用媒体查询。但是您正在使用引导程序,您不需要see this table 它根据屏幕大小显示每个类尝试添加多个类,但每个屏幕大小都不能出现每件事使用这些类 [here] 隐藏在特定屏幕大小上。如果您尝试创建菜单,则需要引导 java 脚本代码和 jQuery

【讨论】:

所以我看到了这个......问题是它介于col-lgcol-md 之间。所以在这个断点我想改变到上面的点。有意义吗? 你有没有看到类和相应的屏幕宽度,如果它低于它们将被堆叠 我对这意味着什么感到有点困惑。我的知识可能存在差距 在 col-md 类中查看 970px 最小宽度如果窗口最小调整到该像素,它们将被排列在上方 如果想在调整窗口大小时排列它们,请使用多个类,但相同的是 md-6 用于一个,md-3 用于另一个,而对于大屏幕尺寸 lg-6 和 lg-6 相同元素或标签【参考方案2】:

保罗·菲茨杰拉德,您好。您是否只想将其从 lg... 时的 6x6 更改为 md 时的 9x3 ?

如果是这样,请查看此 Fiddle

调整窗口大小。如果你不希望这个堆叠然后让我们知道。

<div class="container"> 
    <div class="row text-center">
        <div class="col-md-9 col-lg-6 block1"><h2>Header 1</h2></div>
        <div class="col-md-3 col-lg-6 block2"><h2>Header 2</h2></div>    
    </div>    
</div> 

下面的屏幕截图显示了从 LG 6x6 调整为 MD 9x3 时的变化。

已添加到此帖子中

Paul,我想这就是你想要的,在 MDLG媒体断点 /强>。

在下面的屏幕截图中,我添加了文本以显示它何时使用 LGXLGMD

这里是 Fiddle

希望这能让你开始你想要的。

【讨论】:

不,我想在col-lgcol-md 之间进行更改。当它低于min-width 1200px 时,我想根据我在问题中提到的内容更改课程。我问的有意义吗? 嗨,保罗,请阅读此Media Breakpoints。 LG和MD没有太大区别。如果您想要我认为您所要求的内容,您可以添加自己的媒体断点。但话说回来,要减少这样的列 (2),您可能需要在此处重新查看您的整体设计/布局。 Paul,看看我上面的帖子。我添加了一个新的小提琴,它在 MD 和 LG 之间有一个媒体断点。看看它是如何为你工作的。将宽度更改为您要查找的内容,我将其设置为 1100px 到 1200px。

以上是关于根据屏幕大小/媒体查询更改 Bootstrap 列类属性的主要内容,如果未能解决你的问题,请参考以下文章

使用媒体查询按屏幕大小调整文本大小

Bootstrap 根据屏幕大小显示行中的元素数

CSS媒体查询更改html选择器中的字体大小不起作用

如何隐藏/删除基于 Bootstrap 媒体查询断点的类?

让 CSS 媒体查询使用 html 文档的 em 大小而不是浏览器?

Bootstrap 更改导航栏字体大小