bootstrap cloumn 分割_如何在列之间平均分割Bootstrap行宽

骑猪看日落 2023-01-01 05:47 111阅读 0赞

![Image 1][]

I have a page with a bootstrap row, which contains several col-md-1 Bootstrap columns (the amount can vary but never exceeds 12). In this JSFiddle you can see an example of what I mean.

Currently if I have four columns (like in my fiddle), they float left and do not use up the full width of the row:

![Image 1][]

...

What I want to have, is that the columns keep the same width as above, however they get spread out equally throughout the row. Remember, there can be any number of col-md-1s between 1 and 12! The result width four columns should look something like this:

![Image 1][]

Further requirements and information:

I'm using this in my AngularJS application, so I'd prefer non-jQuery

solutions

If it's in anyway possible, IE9+ support would be nice!

解决方案

Since you want to have dynamic number of columns, flexbox is the best way to go.

As you required, it supports IE10+

.row \{

border: 1px solid gray;

display: flex;

justify-content: space-between;

/\* Adding for cross browser support \*/

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

\-webkit-box-pack: justify;

\-webkit-justify-content: space-between;

\-ms-flex-pack: justify;

justify-content: space-between;

\}

.col-sm-1 \{

border: 1px solid lightblue;

background: lightblue;

\}

1

2

3

4

1

2

3

4

5

6

7

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，111人围观）

还没有评论，来说两句吧...

相关阅读

相关字符串分割，行转列

文章目录使用场景为什么要用到字符串分割，行转列字符串分割行转列的思路字符串分割函数循环

痛定思痛。/ 2023年06月02日 09:21/ 0 赞/ 13 阅读

相关 Hive学习总结之列分割符和行分割符的使用

我们在Hive中在创建表时，一般会根据导入的数据格式来指定字段分隔符和列分隔符。一般导入的文本数据字段分隔符多为逗号分隔符或者制表符（但是实际开发中一般不用着这种容易在文本内容

川长思鸟来/ 2023年02月21日 06:57/ 0 赞/ 22 阅读

相关如何在bootstrap表格第一列加上复选框

> 在columns中加上一个字段即可 columns: [ { field : 'checked', che

我不是女神ヾ/ 2023年02月20日 15:58/ 0 赞/ 9 阅读

相关 bootstrap cloumn 分割_如何在列之间平均分割Bootstrap行宽

![Image 1][] I have a page with a bootstrap row, which contains several col-md-1 Bootst

骑猪看日落/ 2023年01月01日 05:47/ 0 赞/ 112 阅读

相关如何实现 mysql 字符串分割，转换为列

mysql 字符串分割，转换为列本文个人博客地址：[https://www.leafage.top/posts/detail/21287YXM][https_www.l

约定不等于承诺〃/ 2022年12月25日 15:49/ 0 赞/ 270 阅读

相关 js平均分割数组

var data = \['法国','澳大利亚','智利','新西兰','西班牙','加拿大','阿根廷','美国','0','国产','波多黎各','英国','比利时','德

我不是女神ヾ/ 2022年06月08日 13:29/ 0 赞/ 216 阅读

相关 bootstrap——列的适用性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me

拼搏现实的明天。/ 2022年06月01日 23:43/ 0 赞/ 150 阅读

相关 BootStrap Table：列参数

> 官方文档地址：[http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/][http_bootstrap-t

傷城~/ 2022年05月22日 00:51/ 0 赞/ 382 阅读

相关 BootStrap在一行如何展示多行单据

个人资源与分享网站：[http://xiaocaoshare.com/][http_xiaocaoshare.com] 1.效果图： ![20191101154714963

àì夳堔傛蜴生んèń/ 2021年09月23日 10:26/ 0 赞/ 255 阅读

相关 excel设置行高等于列宽_如何在Excel中设置行高和列宽

![excel设置行高等于列宽][excel] excel设置行高等于列宽 ![00\_lead\_image\_changing\_row\_height\_and\_c

心已赠人/ 2021年07月26日 21:09/ 0 赞/ 577 阅读