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

Question

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

javascriptcsstwitter-bootstrapmedia-queries

3

我正在使用Twitter的bootstrap框架，遇到了一个问题。我正在使用网格系统，在我的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？非常感谢任何帮助，因为我已经进行了大量研究，但找不到解决方案。如果需要进一步的代码/信息，请告知。谢谢。

- Paul Fitzgerald

2个回答

0

不需要使用Java Script，可以使用媒体查询。但是由于您正在使用Bootstrap，因此不需要那个查看此表格，它会根据屏幕大小显示每个类。尝试添加多个类，但并非所有内容都能在每个屏幕大小上显示，请使用这些类[此处]在特定的屏幕大小上隐藏。如果您要创建菜单，则需要Bootstrap JavaScript代码和jQuery。

- Code Warrior

我看到过这个问题，就是它在col-lg和col-md之间断开了。因此，在这个断点上，我想要改变上面的点。有意义吗？ - Paul Fitzgerald

你看到类和相应的屏幕宽度了吗？如果宽度较小，它们将会被堆叠。 - Code Warrior

我有点困惑那是什么意思。可能是我的知识有所欠缺。 - Paul Fitzgerald

如果窗口调整到最小970像素宽度，那么在col-md类中查看它们将会被排列在上方。 - Code Warrior

只需为大分辨率添加一个col类：<div class="col-lg-6"><div> <div class="col-lg-6"><div> - Code Warrior

显示剩余5条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AngularJR · Accepted Answer

Paul Fitzgerald，你好。你是想将这个从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时的变化。

enter image description here

在这篇文章中新增内容：

Paul，我认为你想要的是在MD和LG之间添加一个新的媒体断点。

在下面的截图中，我添加了文本以显示它何时使用LG、XLG和MD。

adding media breakpoints

这里是Fiddle。希望这能让你开始实现你想要的内容。