css - 如何使用 CSS 选择器在 Bootstrap 4 中定位移动网格类 col-1,2,3, ..........12?
问题描述
如何在 css 中仅选择 col-1,2,3......12,我尝试使用 .row [class*='col-'] 但它选择了所有网格类。
.container .row [class*="col-*"] {
background: red !important;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hi Amma Bootstrap 4 </title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container .row [class*="col-*"] {
background: red !important;
}
</style>
</head>
<body>
<div class="container">
<div class="row m-4">
<div class="col-12 col-sm-6 col-md-3 bg-success">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="col-12 col-sm-6 col-md-3 bg-warning">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
<div class="col-12 col-sm-6 col-md-3 bg-success mt-3">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
<div class="col-12 col-sm-6 col-md-3 bg-warning mt-3">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</div>
</div>
</body>
</html>
解决方案
.col, [class*="col-"] {
// your style
}
推荐阅读
- java - Java等效于elasticsearch CURL查询?
- javascript - JS 创建元素中的图像有时加载质量很差
- html - Html 大小太长 - 必应网站管理员工具
- python - Python代码错误连接到连接到继电器的COM端口
- python - 循环中的数据框索引
- c# - 屏蔽时可以使用哪些逻辑操作来忽略不相关的位?
- sql - 从文件中提取文件扩展名,不包括查询参数 SQL
- typescript - 打字稿如何从常量属性值推断类型
- apache-spark - 为什么 Apache Spark 会根据文件大小读取 CSV 分区以及如何更改分区?
- elastic-stack - 如何微调 ELK