在引導程序中堆疊div的垂直方向

Question

我正在使用Bootstrap使用Bootstrap創建一個方框(.info-box)，其中包含中間的文本和兩行(.info-line)（文本上方和下方的另一行）。在懸停時，我希望線條通過延伸寬度來設置動畫。我已經完成了動畫，但我無法垂直獲取div堆棧。

如何在Bootstrap中垂直創建div堆棧？的

.info-box { 
 
    text-align: center; 
 
    height: 200px; 
 
    color: white; 
 
} 
 

 
.info-box .info-header { 
 
    background-color: #3178b9; 
 
    height: 90%; 
 
    border: 1px solid #f5f0e7; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    -webkit-transition: all 150ms ease-out; 
 
    -moz-transition: all 150ms ease-out; 
 
    -o-transition: all 150ms ease-out; 
 
    transition: all 150ms ease-out; 
 
} 
 

 
.info-box .info-header:hover { 
 
    background-color: #b4a28f; 
 
    border: 5px solid #f5f0e7; 
 
    -webkit-transition: all 150ms ease-in; 
 
    -moz-transition: all 150ms ease-in; 
 
    -o-transition: all 150ms ease-in; 
 
    transition: all 150ms ease-in; 
 
} 
 

 
.info-box .info-header .info-line { 
 
    float: left; 
 
    background-color: white; 
 
    height: 2px; 
 
    width: 0%; 
 
    -webkit-transition: all 150ms ease-out; 
 
    -moz-transition: all 150ms ease-out; 
 
    -o-transition: all 150ms ease-out; 
 
    transition: all 150ms ease-out; 
 
} 
 

 
.info-box .info-header:hover .info-line { 
 
    background-color: white; 
 
    height: 2px; 
 
    width: 30%; 
 
    -webkit-transition: all 150ms ease-in; 
 
    -moz-transition: all 150ms ease-in; 
 
    -o-transition: all 150ms ease-in; 
 
    transition: all 150ms ease-in; 
 
} 
 

 
.info-content-box { 
 
    padding-bottom: 30px; 
 
    width: 100%; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"> 
 
<div class="col-md-3 info-box"> 
 
    <div class="info-header" data-name="content1"> 
 
    <div class="info-line"></div> 
 
    <p>hello</p> 
 
    <div class="info-line"></div> 
 
    </div> 
 
</div>

Answer 1

，而不是浮動的.info線，使其display: inline-block因爲你是在.INFO頭使用display: flex，你也應該作出flex-direction: column所以使得其項目上的每個堆棧其他。

查看更新的代碼：

.info-box { 
 
    text-align: center; 
 
    height: 200px; 
 
    color: white; 
 
} 
 

 
.info-box .info-header { 
 
    background-color: #3178b9; 
 
    height: 90%; 
 
    border: 1px solid #f5f0e7; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    -webkit-transition: all 150ms ease-out; 
 
    -moz-transition: all 150ms ease-out; 
 
    -o-transition: all 150ms ease-out; 
 
    transition: all 150ms ease-out; 
 
} 
 

 
.info-box .info-header:hover { 
 
    background-color: #b4a28f; 
 
    border: 5px solid #f5f0e7; 
 
    -webkit-transition: all 150ms ease-in; 
 
    -moz-transition: all 150ms ease-in; 
 
    -o-transition: all 150ms ease-in; 
 
    transition: all 150ms ease-in; 
 
} 
 

 
.info-box .info-header .info-line { 
 
    display: inline-block; 
 
    background-color: white; 
 
    height: 2px; 
 
    width: 0%; 
 
    -webkit-transition: all 150ms ease-out; 
 
    -moz-transition: all 150ms ease-out; 
 
    -o-transition: all 150ms ease-out; 
 
    transition: all 150ms ease-out; 
 
} 
 

 
.info-box .info-header:hover .info-line { 
 
    background-color: white; 
 
    height: 2px; 
 
    width: 30%; 
 
    -webkit-transition: all 150ms ease-in; 
 
    -moz-transition: all 150ms ease-in; 
 
    -o-transition: all 150ms ease-in; 
 
    transition: all 150ms ease-in; 
 
} 
 

 
.info-content-box { 
 
    padding-bottom: 30px; 
 
    width: 100%; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"> 
 
<div class="col-md-3 info-box"> 
 
    <div class="info-header" data-name="content1"> 
 
    <div class="info-line"></div> 
 
    <p>hello</p> 
 
    <div class="info-line"></div> 
 
    </div> 
 
</div>