html - 如何使这些元素居中？

Question

我找到了一段很棒的代码，但是当我试图修改它以满足我的需要时，我无法完全正确，我希望有人能给我指出正确的方向。

有问题的片段是这个:code

我只想要三个选项卡并让它们居中，有点像代码片段中的示例只有选项卡 2、3 和 4，到目前为止我怀疑这就是控制那部分样式的原因:

.board .nav-tabs {
    position: relative;
    /* border-bottom: 0; */
    /* width: 80%; */
    margin: 40px auto;
    margin-bottom: 0;
    box-sizing: border-box;

}

有什么建议吗？

编辑:

Answer 1

请查看此片段 http://bootsnipp.com/user/snippets/40NRR

我使用了 display flex，然后设置 .nav-tabs 的百分比宽度以使其居中。还有一些其他小样式，例如更改 border-bottom 所在的位置。

编辑:该片段似乎没有显示。

.board .nav-tabs {
    display: flex;
    position: relative;
    border-bottom: 0;
    width: 80%;
    margin: 40px auto;
    margin-bottom: 0;
    box-sizing: border-box;
}
.board .nav-tabs > li {
    flex: 1;
    width: 20%;
}