在div宽度问题内垂直对齐引导行中的行

Question

尝试将引导行及其内容放在div内。代码如下：

HTML：

<div class="horizontal-layout"> 
<div class="row"> 
    <div class="col-md-3"> 
     <div class="packet-icon"> 
      <img src="~/Content/Images/Icons/ic_coversheet_blue.png" style="height:100px; width:100px; cursor:pointer;"> 
      <h4>Add</h4> 
     </div> 

    </div> 
    <div class="col-md-3"> 
     <div class="packet-icon"> 
      <img src="~/Content/Images/Icons/ic_onepager_pink.png" style="height:100px; width:100px;cursor:pointer "> 
      <h4>Add</h4> 
     </div> 
    </div> 
    <div class="col-md-3"> 
     <div class="packet-icon"> 
      <img src="~/Content/Images/Icons/ic_user_profile_green.png" style="height:100px;width:100px;cursor:pointer "> 
      <h4>Add</h4> 
     </div> 
    </div> 
    <div class="col-md-3"> 
     <div class="packet-icon"> 
      <img src="~/Content/Images/Icons/ic_create_packet.png" style="height:100px; width:100px;cursor:pointer"> 
      <h4>View</h4> 
     </div> 
    </div> 
</div> 

CSS：

.horizontal-layout { 
    /*background-color: blue;*/ 
    min-height: 700px; 
    border: 1px solid; 
    border-radius: 5px; 
    border-color: #F26631; 
    padding: 30px; 
} 

.packet-icon { 
    text-align: center; 
    border: 1px solid; 
    border-radius: 5px; 
    border-color: #F26631; 
    min-height: 140px; 
    min-width: 140px; 
} 

结果：

但是当我去并对父div（水平布局）进行更改显示flex和子div对齐中，我的宽度行更改。

的CSS变化后：

.horizontal-layout { 
    /*background-color: blue;*/ 
    min-height: 700px; 
    border: 1px solid; 
    border-radius: 5px; 
    border-color: #F26631; 
    padding: 30px; 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
} 

    .horizontal-layout > div { 
    display: inline-block; 
    vertical-align: middle; 
    } 

OUTPUT：

任何人都可以解决问题与该行？

Answer 1

默认情况下，div是display: block，因此宽度自动为100％。

指定.horizontal-layout > div到display: inline-block改变了这种行为，因此，如果你想保留这一点，你必须手动设置宽度：

.horizontal-layout > div { 
    ... 
    width: 100%; 
}