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会显示为align-middle，我的行宽会改变。

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

输出：

任何人都可以修复有问题的行吗？

Answer 1

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

指定.horizontal-layout > div到display: inline-block更改了该行为，因此如果您想保留该行为，则必须手动设置宽度：

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

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

1 个答案: