如何在移动视图中正确对齐 3 个相等的网格 - bootstrap

Question

我是引导程序的新手。 我创建了 3 个相等的网格列。 它在桌面视图中看起来不错。 但在平板电脑视图中 alignemnt 是不正确的。 请检查下面的图片。 桌面视图
平板电脑，手机视图

我使用的代码：

<div class="col-lg-4 col-md-4 col-sm-4">
        <div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
        <div class="feature-box-icon"><img class="img-responsive" src="images/services/Website.png" alt="Website" ></div>
        <div class="feature-box-info">
        <div class="mb-none">Website Development</div>
        <p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
        </div>
        </div>
        </div>

.feature-box{

    position: relative;

    top: -4px;

}

.feature-box .feature-box-icon {

    border-radius: 35px;

    color: #FFF;

    display: inline-block;

    float: left;

    height: 90px;

    line-height: 35px;

    margin-right: 10px;

    position: relative;

    text-align: center;

    width: 90px;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;



}



.feature-box .feature-box-info {

    padding-left: 80px;

}

.feature-box {

    background: transparent;

    width: 100%;

    height: 100%;

    clear: both;

    padding-bottom: 30px;

}

.feature-box.feature-box-style-2 .feature-box-icon i.fa,

.feature-box.feature-box-style-2 .feature-box-icon i.icons {

    font-size: 28px;

}

.mb-none {

    margin-bottom: 0 !important;

    font-size: 22px;

    color: #918d8d;

    font-weight: 500;



}

h1.tall,

h2.tall,

h3.tall,

h4.tall,

h5.tall,

h6.tall,

p.tall {

    margin-bottom: 33px;

    line-height: 20px;

}

Answer 1

简单，利用行

<div class="row">
    <div class="col-xs-4">
        content
    </div>
    <div class="col-xs-4">
        content
    </div>
    <div class="col-xs-4">
        content
    </div>
</div>

另外总是添加.col-xs-*因为如果你不这样做，它会在某些情况下导致问题
进一步了解 bs 网格系统的旁注：如果设置了col-xs-6 col-md-4 ，则您的元素将如下所示： col-xs-6 col-sm-6 col-md-4 col-lg-4 .

Answer 2

试试这个https://jsfiddle.net/sej7Lfov/

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
                <div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
                <div class="feature-box-info">
                    <div class="mb-none">Website Development</div>
                    <p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
                <div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
                <div class="feature-box-info">
                    <div class="mb-none">Website Development</div>
                    <p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
                <div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
                <div class="feature-box-info">
                    <div class="mb-none">Website Development</div>
                    <p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
                </div>
            </div>
        </div>
    </div><!-- End of row -->

        <div class="row">
        <div class="col-sm-4">
            <div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
                <div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
                <div class="feature-box-info">
                    <div class="mb-none">Website Development</div>
                    <p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
                <div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
                <div class="feature-box-info">
                    <div class="mb-none">Website Development</div>
                    <p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
                <div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
                <div class="feature-box-info">
                    <div class="mb-none">Website Development</div>
                    <p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
                </div>
            </div>
        </div>
    </div><!-- End of row -->
</div><!-- End of container -->

CSS

.feature-box-icon {
    float: left;
    display: inline;
    width: 90px;
    height: 90px; 
}

.feature-box-info {
    display: inline;
}

.feature-box {
    clear:both;
    margin: 20px 0;
}

@media(max-width: 997px) {
    .feature-box-info {
        font-size: 12px;
    }
}