bootstrap-5 - 导航中带有两个单词的引导按钮会导致第二个单词换行

Question

我试图弄清楚如何使用“登录”按钮使引导程序 5 中的导航栏看起来正常。但是该空间导致它“进入”到第二行，使导航栏比预期的要长得多。我不知道如何防止它发生。https://codepen.io/binarycode/pen/PobJvOR

编辑：单词之间的“-”似乎也导致了问题。

    <nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
          <input type="email" aria-label="Email" placeholder="Email" autocomplete="Email" size="25"
           value="{{ last_username }}" name="email" id="inputEmail" class="form-control me-2" required autofocus>
    <input type="password" aria-label="Password" placeholder="Password" autocomplete="current-password" name="password"
           id="inputPassword" class="form-control me-2" required>
      <button class="btn btn-outline-success" type="submit">Log In</button>
    </form>
  </div>
</nav>

标签： bootstrap-5

Answer 1

（您的 CodePen 正在利用 Bootstrap 4.5.0，所以我的答案是双重的……）

---

对于 Bootstrap 4 （您的 CodePen 示例）

你有什么理由使用<form class="d-flex">？？

根据文档，正确用法是<form class="form-inline">. 使用它，包裹就会消失。

如果你必须使用 " d-flex" 那么你需要在某处注入 'white-space: no-wrap' ，例如像这样：

<button class="btn" type="submit" style="white-space: no-wrap">Log In</button>

---

对于 Bootstrap 5 （特定于Beta-2）

尽管文档建议应该使用“ d-flex”，但是当浏览器认为剩余内容太小时，这不适用于包含空格的文本。

这是在问题#32383中提出的- 随后以固定方式关闭（尽管显然不是）。

但是，该问题确实讨论了原因。" d-flex" 只是设置display: flexCSS .. 这反过来为它的所有直接子项启用了弹性上下文。由于表单没有具体定义任何进一步的 flex 属性 .. 如果它认为合适，浏览器会假定包装。

一种解决方法是专门控制 flex 属性 - 一个似乎运行良好（并且在问题中提到）是flex-shrink-0. 将其应用于您的按钮，它应该可以工作：

 <nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <input type="email" aria-label="Email" placeholder="Email" autocomplete="Email" size="25"
        value="{{ last_username }}" name="email" id="inputEmail" class="form-control me-2" required autofocus>
      <input type="password" aria-label="Password" placeholder="Password" autocomplete="current-password" name="password"
        id="inputPassword" class="form-control me-2" required>
      <button class="btn btn-outline-success flex-shrink-0" type="submit">Log In</button>
    </form>
  </div>
</nav>

JSFiddle在这里

（请确保让 BS5 作者知道“修复”不是……在问题#32383和#33184 上。）