引导中的行中的列未填充页面宽度

Question

我有一个网站的部分，有2行内容器，两行有3列的类col-sm-4和col-md-4。两行每列都有1个图像。所有图像在300px宽时大小完全相同。顶部行显示准确，底部行浓缩了3列，并在右侧留下了大面积的宽阔空间。使用检查器时，顶部行列显示为col-md-4类，但底部行列显示为col-sm-4类。我不确定这是不是原因。我还应该提到，顶部行列在每个图像下面都有段落。当仅在1列中将完全相同的段落内容添加到底部行时，问题就解决了，但我不希望这里有段落。我检查了引导CSS和我自己的，试图找到一些风格上的痛处

HTML:

<div class="wrapper">
        <div class="row customer-options">
            <div class="button-container">
                <div class="col-sm-4 col-md-4">
                    <img class="img-circle img-responsive img-center" src="images/button-icon-map2.png" alt="">
                    <h2>Title 1</h2>
                    <p>These marketing boxes are a great place to put some information. These can contain summaries of what the company does, promotional information, or anything else that is relevant to the company. These will usually be below-the-fold.</p>
                </div>
                <div class="col-sm-4 col-md-4">
                    <img class="img-circle img-responsive img-center" src="images/button-icon-pref2.png" alt="">
                    <h2>Title 2</h2>
                    <p>The images are set to be circular and responsive. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
                </div>
                <div class="col-sm-4 col-md-4">
                    <img class="img-circle img-responsive img-center" src="images/button-icon-add2.png" alt="">
                    <h2>Title 3</h2>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
                </div>
            </div>
        </div><!-- /.row -->
    </div><!--wrapper-->

    <hr>

    <div class="wrapper">
        <div class="row tap">
            <div class="tap-container">
                <div class="col-sm-4 col-md-4">
                    <img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">
                    <h2><a href="">About</a></h2>
                </div>
                <div class="col-sm-4 col-md-4">
                    <img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">
                    <h2><a href="">Services</a></h2>
                </div>
                <div class="col-sm-4 col-md-4">
                    <img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">
                    <h2><a href="">Contact</a></h2>
                </div>
            </div>
        </div><!-- /.row -->
    </div><!--wrapper-->

CSS:

.wrapper {
    display: table;
}

.button-container {
    padding-right: 15px;
    padding-left: 15px;
}

.customer-options {
    background-color: #848487;
    padding-top: 20px;
    height:100vh;
    display: table-cell;
    vertical-align: middle;
}

.tap {
    background-color: #848487;
    padding-top: 20px;
    height:100vh;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.tap-container {
    padding-right: 15px;
    padding-left: 15px;
}

.customer-options h2 {
    text-align: center;
}




Answer 1

显示表格和表格单元格优先于响应图像。表格适合其内容，然后img将填充新宽度。您可能会找到一种方法来实现垂直对齐，但我建议您放弃表系统，并正确使用bootstrap的网格系统。然后可以使用FlexBox获得垂直对齐。

http://jsfiddle.net/28qq8fm3/

<style>
    .customer-options {
        background-color: #848487;
        padding-top: 20px;
        vertical-align: middle;
    }
    .tap {
        background-color: #848487;
        padding-top: 20px;
        vertical-align: middle;
        text-align: center;
    }
    .customer-options h2 {
        text-align: center;
    }
</style>

<div>
    <div class="row customer-options">
        <div class="col-sm-4 col-md-4">
            <img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">
             <h2>Title 1</h2>

            <p>These marketing boxes are a great place to put some information. These can contain summaries of what the company does, promotional information, or anything else that is relevant to the company. These will usually be below-the-fold.</p>
        </div>
        <div class="col-sm-4 col-md-4">
            <img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">
             <h2>Title 2</h2>

            <p>The images are set to be circular and responsive. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
        </div>
        <div class="col-sm-4 col-md-4">
            <img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">
             <h2>Title 3</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
        </div>
    </div>
    <!-- /.row -->
</div>
<!--wrapper-->
<hr>
<div>
    <div class="row tap">
        <div class="col-sm-4 col-md-4">
            <img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">
             <h2><a href="">About</a></h2>

        </div>
        <div class="col-sm-4 col-md-4">
            <img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">
             <h2><a href="">Services</a></h2>

        </div>
        <div class="col-sm-4 col-md-4">
            <img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">
             <h2><a href="">Contact</a></h2>

        </div>
    </div>
    <!-- /.row -->
</div>
<!--wrapper-->