javascript-根据屏幕尺寸/媒体查询更改Bootstrap列类属性

我正在使用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-lg和col-md之间时,会发生这种情况.我想做的是在一定的屏幕尺寸下更改类,以便更改为该尺寸.

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

CSS可以通过媒体查询在CSS中使用吗？还是我需要使用JavaScript？由于我已经做了大量研究并且找不到解决方案,所以任何帮助将不胜感激.如果需要其他代码/信息,也请告诉我.

谢谢.

解决方法:

Paul Fitzgerald,您好.您是否只想将lg …时的6×6更改为md的9×3？

如果是这样,请查看此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 6×6调整为MD 9×3时的更改.

添加到此帖子

保罗,我想这就是您在MD和LG之间建立新媒体断点的目的.

在下面的屏幕截图中,我添加了文本以显示其何时使用LG以及XLG和MD.

这是Fiddle.

希望这可以帮助您开始使用所需的方法.

标签：twitter-bootstrap,media-queries,css,javascript
来源： https://codeday.me/bug/20191028/1949724.html