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

来源:柚子科技 WordPress 主题、WordPress插件    date:2022-9-12    标签:,     WordPress主题themes插件plugins开发定制

我们知道,在使用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【点击购买】