html5 – Bootstrap:如何在列中添加垂直偏移量?

发布时间:2020-10-08 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了html5 – Bootstrap:如何在列中添加垂直偏移量?编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Bootstrap提供了一个类col-sm-offset- *来在列之间添加空格.它在笔记本电脑屏幕上工作正常,但是当我们将屏幕分辨率更改为移

在bootstrap lib中是否有任何类可以实现预期的结果.

Refer fiddle

电流输出,

enter image description here

预期结果,

enter image description here

解决方法

您可以向该特定div添加额外的类(任何名称)并使用给定的css.

.custom{
  margin-bottom:10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavender;">col-1</div>
  <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavenderblush;">col-2</div>
  <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavender;">col-3</div>
  <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavenderblush;">col-4</div>
</div>
</div>

总结

以上是编程之家为你收集整理的html5 – Bootstrap:如何在列中添加垂直偏移量?全部内容,希望文章能够帮你解决html5 – Bootstrap:如何在列中添加垂直偏移量?所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478