Css 如何基于窗口分辨率显示更多列？

我有一行包含两列，我想显示第三列只有当窗口的大小调整到一个特定的分辨率，例如：1920x720。我如何使用引导来实现这一点

当前HTML：

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

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

---

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

您可以使用前面提到的隐藏类

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

检查那边的桌子

更新：

对于引导版本>4，您应该像@G-Cyr所说的那样使用 和班上的同学一起。d-sm-none

---

您可以阅读文档

您可以使用前面提到的隐藏类

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

检查那边的桌子

更新：

对于引导版本>4，您应该像@G-Cyr所说的那样使用 和班上的同学一起。d-sm-none

---

您可以阅读文档

您不能使用引导类来阅读文档，您需要为其添加自定义媒体查询。在这种情况下，您不必使用row>col-6类

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

---

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

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

罗盘进近 有控制宽度断点的选项。这可以在_variables.scss文件中找到：

有了它，您可以控制结构在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方法 由于我们无法在引导中控制媒体查询中的设备高度，因此在CSS中重写和使用它可能更容易

罗盘进近 有控制宽度断点的选项。这可以在_variables.scss文件中找到：

有了它，您可以控制结构在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方法 由于我们无法在引导中控制媒体查询中的设备高度，因此在CSS中重写和使用它可能更容易

---

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

.d-sm-none{背景：浅绿色；} 整页运行我以查看第三列 2. 3.

---

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

.d-sm-none{背景：浅绿色；} 整页运行我以查看第三列 2. 3.

---

@JeremyHarris是否有我应该查看的特定部分？对于大型设备使用md，对于小型设备使用sm。col-6.col-md-4了解详细信息，请使用@JeremyHarris提供的链接，或者这可能有助于您轻松完成此操作，如果您愿意在引导断点上中断：768px@JeremyHarris有没有我需要的特别部分应该看看吗？大型设备使用md，小型设备使用sm。col-6.col-md-4了解详细信息使用@JeremyHarris提供的链接，或者这可能会帮助您如果您愿意打破引导断点，您可以轻松完成此操作：768px可能是一个更好的建议链接；类将是.d-sm-none.d-md-blocknow@G-Cyr我想看看您提供的示例，是否可能？thanksi用一个例子补充了一个答案，你首先想到了这个想法，我希望你会更新并做一个片段来演示它；也许&是一个更好的提议链接；类将是.d-sm-none.d-md-blocknow@G-Cyr我想看看您提供的示例，是否可能？thanksi用一个例子补充了一个答案，你首先想到了这个想法，我希望你会更新并做一个片段来演示它；这已经有了内置的类；这已经有了内置的类；属性选项似乎是最容易设置并通过时间、人员和更新进行维护的选项。我本来会使用自定义类或数据属性并最终添加注释，但它的工作原理相同，而且效率很高。是的，像.d-xxl-block这样的类似乎更符合实用程序类。我同意！虽然OP也特别要求测量高度。这些实用程序类只对宽度进行更多的控制。同意，对我来说，你的答案似乎是要选择的。属性选项似乎最容易设置，并通过时间、人员和更新进行维护。我本来会使用自定义类或数据属性，并最终添加注释，但它的工作原理相同，效率也很高。啊，是的，像.d-xxl-block这样的类似乎更符合实用程序类。我同意！虽然OP也特别要求测量高度。这些实用程序类只对宽度进行更多的控制。同意，在我看来，您的答案似乎是要选择的。

<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;
    }
}