代码之家 › 专栏 › 技术社区 › K. R.

在引导中垂直旋转列表组

twitter-bootstrap

K. R. · 技术社区 · 7 年前

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

.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>

1 回复 | 直到 7 年前

K. R. 7 年前

只是想出来了。我将旋转类移到列表组:)

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

推荐文章

xajetin · 导航不更改滚动上的颜色

4 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

4 年前

Bryan Santos · 固定表头与引导

4 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

4 年前

tym · 根据用户偏好显示字段

4 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

4 年前

Pavel · 当验证DIV可见时,引导网格会移动

8 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

8 年前

Alexander David · 折叠卡打开,然后立即再次关闭

8 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

8 年前