Question

我有一个网站的一部分，在容器内有2行，两行都有3列col-sm-4和col-md-4。两行在每列中都有1个图像。所有图像的大小完全相同，宽度为300px。顶行准确显示，底行压缩3列，右侧留下大面积的宽空间。使用检查器时，顶行列显示为类col-md-4，但是buttom行列显示为col-sm-4。我不确定这是不是造成它。我还应该提到顶行列在每个图像下面都有段落。将完全相同的段落内容添加到仅1列中的底行时，问题已解决，但我不想在此处使用段落。我检查了自举CSS和我自己的CSS试图在<p>找到一些可能导致这种但却找不到任何东西的样式。每行和每列都具有完全相同的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-responsive将填充新的宽度。您可以找到一种解决方法来实现垂直对齐，但我建议删除表系统并正确使用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-->

引导程序中的行中的列不会填充页面宽度

1 个答案: