我觉得这个问题以前可能已经回答过了，但是我已经搜索过了，找不到任何接近的问题。
我正在使用一个非常标准的自举行和列设置样式的菜单栏（flexbox）。 这个菜单是由php中的wordpress生成的，而不是用HTML硬编码的。 作为网站的一部分，菜单可以随着时间的推移而改变:一次可能有4个项目，另一次可能有7个项目。 因为这些都是可以改变的项目，我不知道每一个具体会有多宽。
我试图为每一项创建一列的行，因此它们彼此挨着坐，并填满行的整个宽度。 我可以通过简单地使用col在bootstrap中做到这一点，因此它设置为使每个列的宽度相等。
null
<ul class="row">
<li class="col">Menu Item 1</li>
<li class="col">Menu Item 2 with much longer menu title</li>
<li class="col">Menu Item 3 with long title</li>
<li class="col">Menu Item 4</li>
<li class="col">Menu Item 5</li>
</ul>null
在示例中，我们有5个条目，每个列的宽度为20%。 然而，这对我的菜单并不理想，因为菜单文本会有所不同:我希望长的项目填满更多的空间，短的项目填满更少的空间，所以你将得到30%和10%，而不是20%-20%。
有人知道在Flexbox中有没有办法做到这一点吗？ 我愿意接受其他选择，比如使用简单的div widthfloat:leftappliced，或者类似的方法。到目前为止，我使用这些方法的主要问题是，如果不应用width，它们不会自然地填满行的全部空间。
注意:我知道这正是表的作用。 我不愿意使用一个表格，因为它是一个响应性的代码，我需要菜单项在设备上的样式不同，例如给100%的宽度为每个菜单项在移动设备上。 这将是一个巨大的头痛去做，以一个表，但这是非常简单的Flexbox做到这一点。
如果您说您想使用flexbox来完成，而不需要使用bootstrap，那么您可以构建这样一个结构。
每一列都有自己的内容，长度可达。 而当页面变小时，放不下的物品就会被一个接一个地包裹起来。
null
.row {
display: flex;
flex-wrap: wrap;
}
.row>.col {
flex: 1 1 auto;
}<ul class="row">
<li class="col">Menu Item 1</li>
<li class="col">Menu Item 2 with much longer menu title</li>
<li class="col">Menu Item 3 with long title</li>
<li class="col">Menu Item 4</li>
<li class="col">Menu Item 5</li>
<li class="col">Menu Item 6</li>
<li class="col">Menu Item 7</li>
</ul>
也许您正在使用Bootstrap而不是真正需要它。
如果你真的想使用Bootstrap的网格系统，请看一下Bootstrap-grid system文档，其中解释了如何使用col根据有多少其他col自动调整宽度，或者使用col-6自行设置大小以获得50%的宽度col-3获得25%的宽度，。。。
但是，我认为，对于您的菜单，您实际上不需要指定列。 只需使用基本的ul和li，并添加一个display:inline-block，就可以在一行中获得它们。
顺便问一下，你是不是想造一个导航栏？ 如果是，请查看Bootstrap-Navbar
更新:我找到答案了！ Bootstrap的核心样式选项无法在“col”设置中完成我所需要的，所以我使用自己的flexbox样式来覆盖它并修复了这个问题。
“col”有“flex-basis:0”作为标准样式，以及“width:100%”，这迫使所有东西都具有相同的宽度。 我用我自己的css覆盖了这些值，并使所有的内容都非常适合:
null
li {
position: relative;
width: auto;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex-basis: auto;
flex-grow: 1;
max-width: 100%;
}