Bootstrap - 具有响应宽度的自动大小列

Question

我觉得这个问题以前可能已经有人回答过，但我已经搜索过但找不到任何接近的问题。

我正在使用非常标准的 bootstrap 行和列设置来设置菜单栏 (flexbox) 的样式。此菜单由 wordpress 在 php 中生成，而不是在 html 中硬编码。由于它是网站的一部分，菜单会随着时间的推移而变化：它可能一次有 4 个项目，或者另一个有 7 个。因为这些是可以更改的项目，所以我不知道每个项目的确切宽度。

我正在尝试为每个项目制作一行，每个项目都有一列，因此它们彼此相邻并填满该行的整个宽度。我可以通过简单地使用 col 在 bootstrap 中执行此操作，因此它设置为使每列宽度相等。

<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>

在示例中，我们有 5 个项目，每列的宽度为 20%。但是，这对我的菜单来说并不理想，因为菜单文本会有所不同：我希望较长的项目填充更多 space，而较短的项目填充较少，因此您将获得 30% 和 10%，而不是 20 % - 20%.

有谁知道有没有办法在 flexbox 中做到这一点？我对替代方案持开放态度，比如使用简单的 div 宽度 float: left 应用，或类似的，到目前为止，我使用这些的主要问题是它们不会自然地填充行的完整 space 而没有应用的宽度。

注意：我知道这几乎就是 table 所做的。我不愿意为此使用 table，因为它是一段响应式编码，我需要菜单项在设备上具有不同的样式，例如为移动设备上的每个菜单项提供 100% 的宽度。使用 table 实现这一目标将是一件非常令人头疼的事情，但使用 flexbox 则非常简单。

Answer 1

也许您正在使用 Bootstrap 而不是真正需要它。

如果你真的想使用 Bootstrap 的网格系统，请查看文档 Bootstrap - Grid system，其中解释了如何使用 col 来根据数量自动调整宽度其他 col 有，或者自己设置大小 col-6 得到 50% 宽度 col-3 得到 25%，...

但是，我认为，对于您的菜单，您实际上不需要指定列。只需使用基本的 ul 和 li 并添加一个 display: inline-block 即可将它们放在一行中。

顺便问一下，您要构建导航栏吗？如果是这样，请查看 Bootstrap - Navbar

Answer 2

更新：我找到答案了！ Bootstrap 的核心样式选项无法在 'col' 设置中满足我的需要，所以我使用自己的 flexbox 样式来覆盖它并解决了问题。

'Col' 具有 'flex-basis:0' 作为标准样式，以及 'width:100%' 强制所有内容具有相同的宽度。我用自己的 css 覆盖了这些值，并使所有内容都整齐地适合：

li {
    position: relative;
    width: auto;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    flex-basis: auto;
    flex-grow: 1;
    max-width: 100%;
}

Answer 3

如果你说你想使用 flexbox 来做而不一定要使用 bootstrap，你可以构建这样的结构。

每一列都有自己的内容，最大长度。当页面变小时，不适合的项目将被一个一个包裹。

.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 - automatic size columns with responsive width

html

css

flexbox

bootstrap-4

flexboxgrid