Bootstrap 一行拆成5列 代码示例 图文教程

我们知道,在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。

它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。如果要2等分,使用col-md-6即可;要3等分,使用col-md-4即可;但如果我们要5等分或者8等分怎么办呢?下面的示例是bootstrap五等分布局:

<style> .col-xs-2-half, .col-sm-2-half, .col-md-2-half, .col-lg-2-half{ position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; }  @media ( min-width : 768px) { .col-sm-2-half{ width: 20%; float: left; } }  @media ( min-width : 992px) { .col-md-2-half{ width: 20%; float: left; } }  @media ( min-width : 1200px) { .col-lg-2-half{ width: 20%; float: left; } } </style>

在需要的地方加上 class="col-lg-2-half" 即可。

腾讯云限时秒杀【点击购买】

搬瓦工,CN2高速线路,1GB带宽,电信联通优化KVM,延迟低,速度快,建站稳定,搬瓦工BandwagonHost VPS优惠码BWH26FXH3HIQ,支持<支付宝> 【点击购买】!

Vultr$3.5日本节点,512M内存/500G流量/1G带宽,电信联通优化,延迟低,速度快【点击购买】!

阿里云香港、新加坡VPS/1核/1G/25G SSD/1T流量/30M带宽/年付¥288【点击购买】

Bootstrap 一行拆成5列 代码示例 图文教程

`微信`扫码 加好友

链接到文章: https://www.gkxyz.com/bootstrap-yixingchaicheng5lie-daimashili-tuwenjiaocheng.html

推荐站点

  • 阿里云-为了无法计算的价值

    阿里云——阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司之一。提供免费试用、云服务器、云数据库、云 […]

  • 腾讯云 – 产业智变 云启未来

    腾讯云为数百万的企业和开发者提供安全稳定的云计算服务,涵盖云服务器、云数据库、云存储、视频与CDN、域名注册等 […]

  • Akamai(Linode)

    Deploy more with Linux virtual machines, global infrast […]

  • RAKsmart

    主机商介绍:RAKsmart是知名的美国服务器租用商,包括美国站群服务器、美国cn2服务器、香港服务器等热门产 […]

评论已关闭