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

Question

我正在使用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中使用？或者我需要使用javascript吗？任何帮助将不胜感激，因为我做了大量的研究，无法找到解决方案。如果需要任何进一步的代码/信息，请告诉我。

感谢。

Answer 1

Paul Fitzgerald ，你好。你只是想把它从lx的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时的更改。

已添加到此帖

保罗，我认为这就是你想要的，在 MD 和 LG <之间有一个新的媒体断点 / strong>即可。

在下面的屏幕截图中，我添加了文字，以显示何时使用 LG 和 XLG 以及 MD 。

以下是 Fiddle 。

希望这可以帮助您了解自己的想法。

Answer 2

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