根据屏幕 size/media 查询更改 Bootstrap 列 class 属性
Change Bootstrap column class attribute based on screen size/media query
我正在使用 Twitter 的 bootstrap,但我遇到了问题。我正在使用网格系统,并且在我的 html 中使用了 col-lg-6
class 来创建两个宽度相等的不同列。请参阅下面的代码:
<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-lg
和 col-md
之间时,会发生这种情况。我想做的是在特定屏幕尺寸下更改 classes,因此它会更改为这个。
<div class="col-lg-9">
<div class="contentBlock">
<h3>Header</h3>
</div>
</div>
<div class="col-lg-3">
<h3>Header2</h3>
</div>
这在 css 中可以通过媒体查询实现吗?还是我需要使用 javascript?任何帮助将不胜感激,因为我已经做了很多研究但找不到解决方案。如果还需要 code/info,也请告诉我。
谢谢。
不,你不需要 Java Script
你可以使用媒体查询。但你正在使用 bootstrap 你不需要那个 see this table
它根据屏幕大小显示每个 class 尝试添加多个 classes 但每件事都不能出现在每个屏幕尺寸上使用这些 classes [here] 到隐藏在特定的屏幕尺寸。如果您尝试创建菜单,则需要 bootstrap java 脚本代码和 jQuery
保罗·菲茨杰拉德,您好。您是否只想将其从 lg... 时的 6x6 更改为 md 时的 9x3?
如果是,请查看此 Fiddle。
调整 window 的大小。如果您不希望它堆叠,请告诉我们。
<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 时的变化。
已添加到此 post
Paul,我想这就是你想要的,在 MD 之间有一个新的 media 断点 和 LG。
在下面的屏幕截图中,我添加了文本以显示它何时使用 LG 和 XLG 以及 MD。
这里是Fiddle。
希望这能让您开始使用您想要的方式。
我正在使用 Twitter 的 bootstrap,但我遇到了问题。我正在使用网格系统,并且在我的 html 中使用了 col-lg-6
class 来创建两个宽度相等的不同列。请参阅下面的代码:
<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-lg
和 col-md
之间时,会发生这种情况。我想做的是在特定屏幕尺寸下更改 classes,因此它会更改为这个。
<div class="col-lg-9">
<div class="contentBlock">
<h3>Header</h3>
</div>
</div>
<div class="col-lg-3">
<h3>Header2</h3>
</div>
这在 css 中可以通过媒体查询实现吗?还是我需要使用 javascript?任何帮助将不胜感激,因为我已经做了很多研究但找不到解决方案。如果还需要 code/info,也请告诉我。
谢谢。
不,你不需要 Java Script
你可以使用媒体查询。但你正在使用 bootstrap 你不需要那个 see this table
它根据屏幕大小显示每个 class 尝试添加多个 classes 但每件事都不能出现在每个屏幕尺寸上使用这些 classes [here] 到隐藏在特定的屏幕尺寸。如果您尝试创建菜单,则需要 bootstrap java 脚本代码和 jQuery
保罗·菲茨杰拉德,您好。您是否只想将其从 lg... 时的 6x6 更改为 md 时的 9x3?
如果是,请查看此 Fiddle。
调整 window 的大小。如果您不希望它堆叠,请告诉我们。
<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 时的变化。
已添加到此 post
Paul,我想这就是你想要的,在 MD 之间有一个新的 media 断点 和 LG。
在下面的屏幕截图中,我添加了文本以显示它何时使用 LG 和 XLG 以及 MD。
这里是Fiddle。
希望这能让您开始使用您想要的方式。