我是 Bootstrap 的新手。我创建了 3 个相等的网格列。它在桌面 View 中看起来不错。但在平板电脑 View 中对齐是不合适的。请检查下面的图片。
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;
}
最佳答案
简单，利用行
<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.
关于javascript - 如何在移动 View 中正确对齐 3 个相等的网格 - bootstrap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33605633/