需要检查此col(col-sm-4col-md-4col-lg-4)说明
需要检查此col(col-sm-4col-md-4col-lg-4)说明
提问于 2017-07-04 18:50:20
我需要我的网站3*3服务盒与responsive.But对齐不是proper.each盒子在第一排在第二排不同，最后一个盒子是移动到第四个row.so需要3*3盒子类型的代码。
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="serviceBox_2">
<i class="fa fa-bell"></i>
<h3>Broadband Services</h3>
<p>Integer ultrices scelerisque nulla fringilla.
Praesent leo massa, ullamcorper venenatis tempor.</p>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="serviceBox_2">
<i class="fa fa-briefcase"></i>
<h3>Dedicated Leased Line</h3>
<p>Integer ultrices scelerisque nulla fringilla.
Praesent leo massa, ullamcorper venenatis tempor.</p>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="serviceBox_2">
<i class="fa fa-rocket"></i>
<h3>Dark Fibre</h3>
<p>Integer ultrices scelerisque nulla fringilla.
Praesent leo massa, ullamcorper venenatis tempor.</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="serviceBox_2">
<i class="fa fa-rocket"></i>
<h3>CCTV Installation</h3>
<p>Integer ultrices scelerisque nulla fringilla.
Praesent leo massa, ullamcorper venenatis tempor.</p>
</div>
<div class="col-sm-12 col-sm-offset-12 col-xs-12 col-md-12">
<div class="serviceBox_2">
<i class="fa fa-rocket"></i>
<h3>CCTV Installation</h3>
<p>Integer ultrices scelerisque nulla fringilla.
Praesent leo massa, ullamcorper venenatis tempor.</p>
</div>
</div>
</div>回答 2
Stack Overflow用户
发布于 2017-07-04 18:54:37
您错误地关闭了倒数第二个div，使最后一个div成为它的子级。此外，Bootstrap还提供了一个row class，它在创建行时非常有用。
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="serviceBox_2">
<i class="fa fa-bell"></i>
<h3>Broadband Services</h3>
<p>Integer ultrices scelerisque nulla fringilla. Praesent leo massa, ullamcorper venenatis tempor.</p>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="serviceBox_2">
<i class="fa fa-briefcase"></i>
<h3>Dedicated Leased Line</h3>
<p>Integer ultrices scelerisque nulla fringilla. Praesent leo massa, ullamcorper venenatis tempor.</p>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="serviceBox_2">
<i class="fa fa-rocket"></i>
<h3>Dark Fibre</h3>
<p>Integer ultrices scelerisque nulla fringilla. Praesent leo massa, ullamcorper venenatis tempor.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="serviceBox_2">
<i class="fa fa-rocket"></i>
<h3>CCTV Installation</h3>
<p>Integer ultrices scelerisque nulla fringilla. Praesent leo massa, ullamcorper venenatis tempor.</p>
</div>
</div>
<div class="col-sm-12 col-sm-offset-12 col-xs-12 col-md-12">
<div class="serviceBox_2">
<i class="fa fa-rocket"></i>
<h3>CCTV Installation</h3>
<p>Integer ultrices scelerisque nulla fringilla. Praesent leo massa, ullamcorper venenatis tempor.</p>
</div>
</div>
</div>
</div>Stack Overflow用户
发布于 2017-07-04 18:58:57
您需要为每12列添加一行。
另外，如果你想使用具有相同值的sm，md和lg，那么你只需要使用sm。
<div class="row">
<div class="col-sm-4">
<div class="serviceBox_2">
<i class="fa fa-bell"></i>
<h3>Broadband Services</h3>
<p>Integer ultrices scelerisque nulla fringilla. Praesent leo massa, ullamcorper venenatis tempor.</p>
</div>
</div>
<div class="col-sm-4 ">
<div class="serviceBox_2">
<i class="fa fa-briefcase"></i>
<h3>Dedicated Leased Line</h3>
<p>Integer ultrices scelerisque nulla fringilla. Praesent leo massa, ullamcorper venenatis tempor.</p>
</div>
</div>
<div class="col-sm-4">
<div class="serviceBox_2">
<i class="fa fa-rocket"></i>
<h3>Dark Fibre</h3>
<p>Integer ultrices scelerisque nulla fringilla. Praesent leo massa, ullamcorper venenatis tempor.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="serviceBox_2">
<i class="fa fa-rocket"></i>
<h3>CCTV Installation</h3>
<p>Integer ultrices scelerisque nulla fringilla. Praesent leo massa, ullamcorper venenatis tempor.</p>
</div>
</div>
<div class="col-sm-4">
<div class="serviceBox_2">
<i class="fa fa-rocket"></i>
<h3>CCTV Installation</h3>
<p>Integer ultrices scelerisque nulla fringilla. Praesent leo massa, ullamcorper venenatis tempor.</p>
</div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44903967
复制相关文章
相似问题
腾讯云开发者
