內嵌列溢出

我正在爲我的主頁顯示。我在一個容器中創建了五個col-md-2，並將列的大小調整爲我需要的寬度。調整它們很容易，但現在我遇到了一個問題。而不是這些列全部等於佔總容器寬度的83.3％，在重新調整它們之後，它們現在總共佔容器的約116％。這些列中的一些被保留爲彼此重疊一點，但仍然會有一些額外的空間需要在左側和右側溢出容器。我可以讓最左側的列溢出容器外，但是我很難讓最右側的列溢出。任何時候，最右邊的（藍色）div太大而無法放入內聯空間，它會被壓下。有誰知道我可以如何強制藍色的div溢出容器的右側，而不是被推下來？我試圖使用溢出屬性，但沒有任何運氣=。我想讓左側和右側的溢出設置爲隱藏狀態，但任何溢出都會暫時運行！內嵌列溢出

HTML：

<div class="date-con"> 
    <div class="col-md-2 green"> 

    </div> 
    <div class="col-md-2 white-left"> 

    </div> 
    <div class="col-md-2 red"> 

    </div> 
    <div class="col-md-2 white-right"> 

    </div> 
    <div class="col-md-2 blue"> 

    </div> 
</div>

CSS：

.date-con { 
    width: 75%; 
    height: 250px; 
    background-color: lightpink; 
    border: 1px solid black; 
    margin: 0 auto; 
} 
.date-con .green { 
    width: 24.5%; 
    height: 200px; 
    background-color: green; 
    margin-left: -1.5%; 
    position: relative; 
    z-index: 100; 
    display: inline-block; 
} 
.date-con .white-left { 
    width: 19.83333333333333%; 
    height: 150px; 
    background-color: #E8E8E8; 
    margin-left: -3.1%; 
    position: relative; 
    display: inline-block; 
z-index: 10; 
} 
.date-con .red { 
    width: 23.66666666666667%; 
    height: 200px; 
    background-color: red; 
    margin-left: -3.1%; 
    position: relative; 
    display: inline-block; 
    z-index: 100; 
} 
.date-con .white-right { 
    width: 23%; 
    height: 150px; 
    background-color: #E8E8E8; 
    margin-left: -3.6%; 
    position: relative; 
    display: inline-block; 
    z-index: 10; 
} 
.date-con .blue { 
    width: 25.41666666666667%; 
    height: 200px; 
    background-color: blue; 
    margin-left: -3.5%; 
    margin-top: 50px; 
    position: relative; 
    display: inline-block; 
    z-index: 10; 
}

這裏是我的bootply：

http://www.bootply.com/117408

來源

2014-02-27 Jack Sniper