Bootstrap目前已经发布了4.1.x正式版本,相比起Bootstrap 3来说,简直是一个质的飞跃,在这里强烈建议还在使用旧版本的朋友升级到4.1.x。
好了,今天我们要来讲解一下,在Bootstrap 4(以下简称BS4)中如何自定义表格的列宽度。
我们的示例中使用的是row,col等一系列类名(class)来完成表格宽度的自定义,当然也可以直接自定义css,不过这就不属于我们的讨论范畴了。
首先我们建立一张只包含了颜色样式的表格:
#FirstSecondThird
1This is a remarkably long phrase.JavascriptPython2Having fun with Bootstrap 4!CSSBootstrap3PHPnpmnodejs可以看到,表格的列都是不同宽度。
那么我们来演示一下如何将表格所有列都设置成一样宽度。
我们建立第二张表格,在表格里添加一些row,col等类名:
#FirstLastHandle
1This is a remarkably long phrase.JavascriptPython2Having fun with Bootstrap 4!CSSBootstrap3PHPnpmnodejs可以看到,我们给table及tr加上了row,thead及tbody使用了w-100让其占满整个表格长度,然后th及td全部使用了col-3使每列宽度一致。
我们来看一下两张表格比对图:
注意,如果你需要不同的列宽度,可以根据你的需求相应更改col-3为其他长度,例如col-4,但是需要保证所有列长度相加正好为col-12的长度,并且需要注意,th和对应td需要相同的类才能保持宽度一致。另外,通常在使用row的时候记得加上mx-0,否则会出现margin诡异的问题,大家可以自己测试。由于中文字体的padding问题,如果遇到单行显示不下的情况,可以在适当的单元中修改默认的padding(例如加上px-0)
好了,今天就讲解到这里,有问题欢迎指正与交流。