时间戳

首页 > 解决方案 > 包含不同行的大列

html - 包含不同行的大列

问题描述

我正在尝试改善网络视图，并且我想对一些对象进行分类。

我的想法是按课程分类，然后按季度分类，然后按主题分类。

在这张照片中，我正在尝试做 2 个级别（课程 + 科目），我希望第一门课程的所有科目都像第一门课程（SAE）一样。

在此处输入图像描述

SAE2 处于一个糟糕的位置，我不知道如何将其置于 SAE 之下。

我正在使用 Bootstrap，但我有一些 CSS。这是我的代码：

.columnaCurs{
    height:200px;
    width:50%;
    color:White;
    text-align:center;
    
}
.verticalText{
    writing-mode: tb-rl;
    padding-top:100%;
}
.curs1{
    background-color:Blue;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>

<body>
<div class="container">
  <div class="row">
      <div class="col col-md-1 align-self-center"><div class="columnaCurs curs1"><span class="verticalText">1st course</span></div></div>
      <div class="col col-md-8 card" style="height:25%;">SAE</div>
      <div class="row">
          <div class="col col-md-8 card" style="height:25%;">SAE2</div>
      </div>
  </div>
</div>
</body>

我该如何改进它？稍后我会添加更好的设计，但我想要这个“绘制”关卡。

我希望你能帮助我。谢谢！

标签： htmlcssbootstrap-4

解决方案

检查您的引导列和行我添加了更新的解决方案

.columnaCurs{
    height:200px;
    width:50%;
    color:White;
    text-align:center;
    
}
.verticalText{
    writing-mode: tb-rl;
    padding-top:100%;
}
.curs1{
    background-color:Blue;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>

<body>
<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-4">
           <div class="col align-self-center"><div class="columnaCurs curs1"><span class="verticalText">1st course</span></div></div>
    </div>
    <div class="col-md-8 col-sm-8">
      <div class="row">
          <div class="col-md-12 col-sm-12">
          <div class="card" style="">SAE</div>
          </div>
           <div class="col-md-12 col-sm-12">
                    <div class="card" style="">SAE2</div>
           </div>
      </div>
    </div>
  </div>
</div>
</body>

推荐阅读