jquery - 使用 Bootstrap 3 对齐标题、图标和内容

Question

使用 Bootstrap 3.3.7，在一个有四列的部分中，我试图弄清楚如何对齐 a) 不同长度的标题，b) 位于标题下方的图标，以及 c) 无序的列表，位于图标下方。我正在使用 Flex 使所有四列保持相同的高度。

标题应垂直居中对齐。这是我目前所拥有的(JSFiddle 链接:https://jsfiddle.net/Codewalker/8xay3cow/)。

<div class="container">
        <div class="row is-flex vdivider">
            <div class="col-sm-3 col-xs-6">
                <div class="secCallOut2">
                    <h4 class="text-center">Column Number 1</h4>
                    <p class="text-center"><img src="https://www.msd134.org/Static/V2_19_07/GlobalAssets/Images/Icons/100/video-library-placeholder.png"></p>
                    <ul>
                        <li>Bullet One</li>
                        <li>Bullet Two</li>
                        <li>Bullet Three</li>
                        <li>Bullet Four</li>
                        <li>Bullet Five</li>
                        <li>Bullet Six</li>
                        <li>Bullet Seven</li>
                        <li>Bullet Eight</li>
                        <li>Bullet Nine</li>
                        <li>Bullet Ten</li>
                        <li>Bullet Eleven</li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="secCallOut2">
                    <h4 class="text-center">Elongated Second Column Title</h4>
                    <p class="text-center"><img src="https://www.msd134.org/Static/V2_19_07/GlobalAssets/Images/Icons/100/video-library-placeholder.png"></p>
                    <ul>
                        <li>Bullet One</li>
                        <li>Bullet Two</li>
                        <li>Bullet Three</li>
                        <li>Bullet Four</li>
                        <li>Bullet Five</li>
                        <li>Bullet Six</li>
                        <li>Bullet Seven</li>
                        <li>Bullet Eight</li>
                        <li>Bullet Nine</li>
                        <li>Bullet Ten</li>
                        <li>Bullet Eleven</li>
                        <li>Bullet Twelve</li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="secCallOut2">
                    <h4 class="text-center">Three Communications</h4>
                    <p class="text-center"><img src="https://www.msd134.org/Static/V2_19_07/GlobalAssets/Images/Icons/100/video-library-placeholder.png"></p>
                    <ul>
                        <li>Bullet One</li>
                        <li>Bullet Two</li>
                        <li>Bullet Three</li>
                        <li>Bullet Four</li>
                        <li>Bullet Five</li>
                        <li>Bullet Six</li>
                        <li>Bullet Seven</li>
                        <li>Bullet Eight</li>
                        <li>Bullet Nine</li>
                        <li>Bullet Ten</li>
                        <li>Bullet Eleven</li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="secCallOut2">
                    <h4 class="text-center">Column Four</h4>
                    <p class="text-center"><img src="https://www.msd134.org/Static/V2_19_07/GlobalAssets/Images/Icons/100/video-library-placeholder.png"></p>
                    <ul>
                        <li>Bullet One</li>
                        <li>Bullet Two</li>
                        <li>Bullet Three</li>
                        <li>Bullet Four</li>
                        <li>Bullet Five</li>
                        <li>Bullet Six</li>
                        <li>Bullet Seven</li>
                        <li>Bullet Eight</li>
                        <li>Bullet Nine</li>
                        <li>Bullet Ten</li>
                        <li>Bullet Eleven</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

CSS

.secCallOut2 {
height:100%;
margin-top:0;
padding:20px;
}
.secCallOut2 h4 {
    color:#009FDA;
    margin:0 14px 12px;
}
.secCallOut2 p {
    color:#fff;
}
.row.is-flex {
    display: flex;
    flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}
.row.is-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.row.vdivider [class*='col-']:not(:last-child):after {
    background: #e0e0e0;
    width: 1px;
    content: "";
    display:block;
    position: absolute;
    top:0;
    bottom: 0;
    right: 0;
    height:95%;
}

Answer 1

我想这个解决方案对你有用，但你需要为 h4 元素定义平均高度，我在这里将其设为 90px

高度:90px； 垂直对齐:中间； 显示:表格单元格；