0

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

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

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

<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%。但是，这对于我的菜单并不理想，因为菜单文本会有所不同：我希望较长的项目填充更多空间，较短的项目填充更少，因此您将获得 30% 和 10% 而不是 20% - 20% .

有谁知道是否有办法在 flexbox 中做到这一点？我对替代方案持开放态度，例如使用简单的 divfloat: left应用宽度或类似方法，到目前为止，我使用这些的主要问题是它们不会在没有应用宽度的情况下自然地填充行的全部空间。

注意：我知道这几乎就是表格的作用。我不愿意为此使用表格，因为它是响应式编码，我需要菜单项在设备上以不同的方式设置样式，例如为移动设备上的每个菜单项提供 100% 的宽度。使用表格来实现这一点将是一件非常头疼的事情，但使用 flexbox 来实现这一点非常简单。

4

3 回答 3

1

如果你说你想用 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>

如果我误解了你，请告诉我。

于 2020-06-22T13:23:49.253 回答
0

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

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

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

顺便说一句，您是否正在尝试构建导航栏？如果是这样，请查看Bootstrap - Navbar

于 2020-06-22T13:17:27.337 回答
-1

更新：我想出了答案！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%;
}

于 2020-06-22T13:21:22.753 回答