python bootstrap container宽度_Bootstrap 4 自定义表格列宽度

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)

好了，今天就讲解到这里，有问题欢迎指正与交流。