如何在移動視圖中正確對齊 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;
    }
}