创建5列等高[重复]

Question

我用引导程序创建了几列作为页脚。每列都有一些信息（即：地址、链接等）。但是其中包含更多信息的列会比另一列更长，因此所有列的排列不均匀。我该如何解决这个问题？

我的页脚：

<div class="row row-centered">
                        <div class="col-md-2 col-centered col-centered">
                            <!-- Address -->
                                <div class="" style="padding-right:0">
                                    <div class="contact-item">
                                        <div class="ci-icon">
                                            <i class="fa fa-building-o"></i>
                                        </div>
                                        <div class="ci-title font-alt">
                                            Markten
                                        </div>
                                        <div class="ci-text">
                                            Website B.V.<br>
                                            Overkampsweg 16a<br>
                                            8102 PH Raalte
                                        </div>
                                    </div>
                                </div>
                                <!-- End Address -->
                        </div>
                        <div class="col-md-2 col-centered">
                            <!-- Address -->
                                <div class="" style="padding-right:0">
                                    <div class="contact-item">
                                        <div class="ci-icon">
                                            <i class="fa fa-cube"></i>
                                        </div>
                                        <div class="ci-title font-alt">
                                            Producten
                                        </div>
                                        <div class="ci-text">
                                            <a href="http://www.website.nl/filtering.html">Filtering</a><br>
                                            <a href="http://www.website.nl/toebehoren.html">Toebehoren</a><br>
                                            <a href="http://wwww.website.nl/zacht.html">Zacht</a>
                                            <a href="http://www.website.nl/hard.html">Hard</a>
                                            <a href="http://www.website.nl/technische-gegevens.html">Technische gegevens</a>
                                        </div>
                                    </div>
                                </div>
                                <!-- End Address -->
                        </div>
                        <div class="col-md-2 col-centered">
                            <!-- Address -->
                                <div class="" style="padding-right:0">
                                    <div class="contact-item">
                                        <div class="ci-icon">
                                            <i class="fa fa-check"></i>
                                        </div>
                                        <div class="ci-title font-alt">
                                            Diensten
                                        </div>
                                        <div class="ci-text">
                                            Website B.V.<br>
                                            Overkampsweg 16a<br>
                                            8102 PH Raalte
                                        </div>
                                    </div>
                                </div>
                                <!-- End Address -->
                        </div>
                        <div class="col-md-2 col-centered">
                            <!-- Address -->
                                <div class="" style="padding-right:0">
                                    <div class="contact-item">
                                        <div class="ci-icon">
                                            <i class="fa fa-external-link"></i>
                                        </div>
                                        <div class="ci-title font-alt">
                                            Links
                                        </div>
                                        <div class="ci-text">
                                            Link 1<br>
                                            Link 2<br>
                                            Link 3
                                        </div>
                                    </div>
                                </div>
                                <!-- End Address -->
                        </div>
                        <div class="col-md-2 col-centered">
                            <!-- Address -->
                                <div class="" style="padding-right:0">
                                    <div class="contact-item">
                                        <div class="ci-icon">
                                            <i class="fa fa-map-marker"></i>
                                        </div>
                                        <div class="ci-title font-alt">
                                            Adresgegevens
                                        </div>
                                        <div class="ci-text">
                                            Website B.V.<br>
                                            Overkampsweg 16a<br>
                                            8102 PH Raalte
                                        </div>
                                    </div>
                                </div>
                                <!-- End Address -->
                        </div>
                    </div>

使用 css：

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

.row-centered {
    text-align: center;
    margin-bottom: 40px;
}

Jsfiddle：

https://jsfiddle.net/L7L8dryd/

Answer 1

这对我来说很好，希望它能解决你的问题。

更改此类并添加表格单元格作为显示值。

.col-centered{
 display:table-cell; 
}

Answer 2

您只能使用引导程序来执行此操作，see this example at bootstrap。