Question

我是引导新手。我创建了3个相等的网格列。它在桌面视图中看起来很好。但在平板电脑视图中，alignemnt是不合适的。请检查下面的图像。 Desktop view
tablet, mobile view

我使用的代码：

<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;
    }
}

如何正确地在移动视图中对齐3个相等的网格 - 引导程序

2 个答案: