如何根据窗口分辨率显示更多列

我有一行包含两列，只有当窗口大小调整到特定分辨率时，我才想显示第三列，例如：1920x720。如何使用引导程序来完成此操作？

当前HTML:

<div class="row"> 
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>

请注意，如果分辨率低于1920x720，那么bootatrap必须只显示两列，否则该行中的列必须为三列。

只有使用引导程序才能实现这一点吗？

指南针方法

有一些选项可以控制宽度断点。这可以在_variables.scss文件中找到：

$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1920px // add custom breakpoint
) !default;
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1880px // add custom breakpoint
) !default;

有了这一点，您可以控制结构对xxl断点做出响应。

<div class="row"> 
<div class="col-6 col-xxl-4">...</div>
<div class="col-6 col-xxl-4">...</div>
<div class="col-4 d-none d-xxl-block">...</div>
</div>

CSS方法

由于我们无法在Bootstrap中开箱即用的媒体查询中控制设备高度，因此在CSS中覆盖并使用自动布局列可能更容易。

<div class="row"> 
<div class="col">...</div>
<div class="col">...</div>
<div class="col d-none" rel="xxl">...</div>
</div>
@media (min-width: 1920px) and (min-height: 720px){
.col[rel="xxl"] {
display: block !important;
}
}

演示FIDDLE
演示结果

您可以使用内置类根据断点隐藏/显示列：示例：

.d-sm-none {background:lightgreen;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row"> 
<div class="col-md-4 col-sm-6">run me in full page to see the third column</div>
<div class="col-md-4 col-sm-6">2</div>
<div class="d-sm-none d-md-block col">3</div>
</div>

您将在中找到用于选择断点的类https://getbootstrap.com/docs/4.3/utilities/display/#hiding-元件

如果最宽的断点与您的需求不匹配，请为它重新创建一个类似的规则。另一个答案为你提供了线索。

table td {
border: solid 1px;
}
table {border-collapse:collapse;}

>
<p>To show an element only on a given interval of screen sizes you can combine one <code class="highlighter-rouge">.d-*-none</code> class with a <code class="highlighter-rouge">.d-*-*</code> class, for example <code class="highlighter-rouge">.d-none .d-md-block .d-xl-none</code>  will hide the element for all screen sizes except on medium and large devices.</p>
<table>
<thead>
<tr>
<th>Screen Size</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hidden on all</td>
<td><code class="highlighter-rouge">.d-none</code></td>
</tr>
<tr>
<td>Hidden only on xs</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
</tr>
<tr>
<td>Hidden only on sm</td>
<td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
</tr>
<tr>
<td>Hidden only on md</td>
<td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
</tr>
<tr>
<td>Hidden only on lg</td>
<td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
</tr>
<tr>
<td>Hidden only on xl</td>
<td><code class="highlighter-rouge">.d-xl-none</code></td>
</tr>
<tr>
<td>Visible on all</td>
<td><code class="highlighter-rouge">.d-block</code></td>
</tr>
<tr>
<td>Visible only on xs</td>
<td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
</tr>
<tr>
<td>Visible only on sm</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
</tr>
<tr>
<td>Visible only on md</td>
<td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
</tr>
<tr>
<td>Visible only on lg</td>
<td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
</tr>
<tr>
<td>Visible only on xl</td>
<td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
</tr>
</tbody>
</table>
<figure class="highlight">  
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-lg-none"</span><span class="nt">&gt;</span>hide on screens wider than lg<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-none d-lg-block"</span><span class="nt">&gt;</span>hide on screens smaller than lg<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>

使用引导程序类无法做到这一点，您需要为其添加自定义媒体查询。在这种情况下，您不必使用row>col-6类

<div class="wrapper"> 
<div class="first">...</div>
<div class="second">...</div>
<div class="third">...</div>

.first,.second,.third{
width:33.33%
}

@media(max-height:720px){
.third{
display:none
}
.first,.second{
width:50%
}
}

您可以使用此处提到的隐藏类

例如，在小型设备上，您可以通过添加此类来隐藏列：hidden-sm-down

看看那里的桌子。

更新：

对于bootstrap ver>4，您应该像@G-Cyr所说的那样使用具有类别.d-sm-none

你可以在这里阅读文档

指南针方法

CSS方法

相关内容

最新更新

热门标签：