如何創建垂直時間表

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