如何创建垂直时间表

Question

我需要的是这样的：

正如你可以看到主要的一个是正确的，接下来是在左边，等几年这样做。

我写了这个HTML & CSS代码：

.full div { 
 
    display: inline-block; 
 
    width: 130px; 
 
    height: 50px; 
 
} 
 

 
.full div:nth-child(odd) { 
 
    float: left; 
 
}

<div class="row"> 
 
    <div class="full"> 
 
    <div class="d1">university 1</div> 
 
    <div class="d2">year 1</div><br> 
 
    <div class="d1">university 2</div> 
 
    <div class="d2">year 2</div><br> 
 
    <div class="d1">university 3</div> 
 
    <div class="d2">year 3</div><br> 
 
    <div class="d1">university 4</div> 
 
    <div class="d2">year 4</div><br> 
 
    </div> 
 
</div>

乍一看是的，它的正常工作如我所料，但事实并非如此。

的问题是：

1. 我不能中心对齐没有母校我做什么。

2. 在超小尺寸div下降，不是并排。

3. 如果我使用像col-xs-6这样的类，它不会像我那样工作。

JSFiddle

只是调整窗口明白我在说什么。

Answer 1

选中此项：希望它接近您的需要。你没有正确使用引导网格系统

https://jsfiddle.net/zke68ao2/1/

.full{ 
    display: inline-block; 
} 
.full div{ 
     display: inline-block; 
     width: 130px; 
     height: 50px; 
     text-align:center; 
    } 

    .full div:nth-child(odd):not(br){ 
     float: left; 
    } 
    .full div:nth-child(even):not(br){ 
     float: right; 
    }