html 使用响应式网格系统，在同一行上保留两列，同时允许在更大的屏幕上使用更多列

ttvkxqim 于 2024-01-04 发布在其他

关注(0)|答案(1)|浏览(81)

下面是一个用Chota编写的简单代码片段：

.card {
  margin: 30px;
}
.tag {
  margin-left: .5em;
}
.field {
  border-radius: 5px;
}

个字符
这里它是如何出现在大屏幕上：
x1c 0d1x的数据
在较小的屏幕上：

的
我想，即使在较小的屏幕上保持在同一行的标签（即“Temperatura”）和它们的值.由于网格系统的宽度是12和文档说：
对于设备宽度<600 px，所有列均为100%
我认为使用类col-6添加两列应该会导致即使对于较小的设备也有一行两列。
很明显我错了。我该怎么改变我的网格？
作为奖励.我想允许在较大的屏幕上有一对夫妇的领域（在例子中，如日期和时间），而在中等/较小的屏幕上，它应该回落到只有一个字段的行。
有没有一个简单的方法来实现这一点？

Html

来源：https://stackoverflow.com/questions/77713538/using-a-responsive-grid-system-keep-two-columns-on-the-same-row-while-allowing

1条答案

按热度按时间

bvhaajcl1#

新的库，但它基本上是灵活的布局，所以你要么查找一个带有属性flex-wrap: nowrap的类，要么像我下面的演示一样创建一个新的类（.mobile-no-wrap），然后将它添加到你需要的地方。
作为奖励.我想允许在较大的屏幕上有一对夫妇的领域（在例子中，如日期和时间），而在中等/较小的屏幕上，它应该回落到只有一个字段的行。
基本上只是flex-wrap: nowrap的另一种情况，将其添加到父div中以使查尔兹在同一行上，然后在较小的屏幕尺寸时使用媒体查询将其断开，并将flex-wrap属性从nowrap反转为wrap。

.card {
  margin: 30px;
}
.tag {
  margin-left: .5em;
}
.field {
  border-radius: 5px;
}
.row.mobile-no-wrap {
  flex-wrap: nowrap;
}

个字符

展开查看全部

赞(0）回复(0）举报 2024-01-04

我来回答

html 使用响应式网格系统，在同一行上保留两列，同时允许在更大的屏幕上使用更多列

1条答案

相关问题

热门标签

最新问答