twitter-bootstrap - 在 Bootstrap 中垂直旋转列表组
问题描述
简单的 html 代码可以正常工作并显示一组行:
<div class="card">
<div class="card-block">
<ul class="list-group" role="group" aria-label="Basic example">
<li class="rotated list-group-item d-flex">Primary</li>
<li class="rotated list-group-item d-flex">Secondary</li>
<li class="rotated list-group-item d-flex">Success</li>
<li class="rotated list-group-item d-flex">Info</li>
<li class="rotated list-group-item d-flex">Warning</li>
<li class="rotated list-group-item d-flex">Danger</li>
</ul>
</div>
</div>
当我添加以下 css 时,列表项变为垂直但全部堆叠在一起。
.rotated {
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
transform: rotate(270deg);
}
如何解决这种情况,以便项目正确显示为列而不是行。谢谢!
.card-deck {
height: 200px;
}
.rotated {
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
transform: rotate(270deg);
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="card-deck">
<div class="card">
<div class="card-block">
<ul class="list-group" role="group" aria-label="Basic example">
<li class="rotated list-group-item d-flex">Primary</li>
<li class="rotated list-group-item d-flex">Secondary</li>
<li class="rotated list-group-item d-flex">Success</li>
<li class="rotated list-group-item d-flex">Info</li>
</ul>
</div>
</div>
</div>
</div>
解决方案
刚刚想通了。我将旋转的类移到列表组中:)
<div class="card">
<div class="card-block">
<ul class="rotated list-group" role="group" aria-label="Basic example">
<li class="list-group-item d-flex">Primary</li>
<li class="list-group-item d-flex">Secondary</li>
<li class="list-group-item d-flex">Success</li>
<li class="list-group-item d-flex">Info</li>
<li class="list-group-item d-flex">Warning</li>
<li class="list-group-item d-flex">Danger</li>
</ul>
</div>
</div>
推荐阅读
- java - Problems with writing to file Java
- python - 如何在 Python 中构造具有多个特征的元素
- jenkins - Jenkins 配置为代码:以编程方式从文件重新加载配置
- oracle - 无法打印 clob 值
- java - Spring Boot OAuth 无法找到请求目标的有效认证路径
- node.js - 我如何在没有转译器或捆绑工具的情况下维护现代静态网站
- asp.net-core - 在 ASP.NET Core 中将链接参数添加到带有井号 (#) 锚 url 的 asp 标签助手
- slick.js - 如何在不删除 HTML 的情况下进行 unslick?
- google-cloud-platform - 如何获取 GCP 中所有项目的所有 VM 信息
- javascript - 只用一个替换双换行符?