Question

我正在尝试改善网络的外观，并且希望对某些对象进行分类。

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

在这张照片中，我试图做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>

我该如何改善？稍后，我将添加更好的设计，但我想使用此“绘制”级别。

希望您能帮助我。谢谢！

Answer 1

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

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

大列包括不同的行

1 个答案: