Question

我在Bootstrap中有三列，包含水平和垂直对齐的文本。问题是列的宽度不相等，第三列比其他两列宽。列具有不同的宽度内容，但每个列都适合总宽度的三分之一。

这是HTML：

<div class="container-fluid">
    <footer class="footer navbar-fixed-bottom footer-bar">
        <div class="row display-tbl">
            <div class="col-xs-4 display-cell"><b>Opt1</b></div>
            <div class="col-xs-4 display-cell"><img src="img.jpg" height="40" width="64"></div>
            <div class="col-xs-4 display-cell"><b>Option 2</b></div>
        </div>
    </footer>
</div>

这是CSS：

.footer-bar {
    color: #FFFFFF;
    background-color: #606060;
}
.display-tbl {
    display: table;
    table-layout: fixed; /* <- makes no difference */
    width: 100%;
}
.display-cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    float: none;
}

Answer 1

问题可能在于您为图片添加了固定宽度，请尝试以下操作：

.display-cell img{
    width: 100%;
    height: 100%;
}

或为图像使用bootstrap响应类：

.img-responsive

＆＃34;使图像响应（将很好地缩放到父元素）＆＃34;

检查工作示例：

http://www.bootply.com/wDTiwG9V49

Bootstrap中的三个相等列，居中文本无效

1 个答案: