html - 导航栏中的换行符问题

Question

我现在搜索并尝试了几个小时，但我没有让它工作。

我有一个“内联表单”，左侧有一个按钮，中间有一个输入字段，导航栏右侧有一个按钮。当导航栏未折叠时，它会以正确的方式显示。

但是当我折叠菜单时，每个按钮附近都会出现换行符。但我想将所有三个控件放在一行中。

It looks like this in the navbar

And it looks like that in the menu

编辑:我发现当“input-group”的宽度为 100% 时，这个问题只发生在“sm”-break 处。

我正在使用这段代码:

<nav class="navbar navbar-expand-md navbar-dark bg-hv-dark-green sticky-top">
  <a class="navbar-brand h1 mb-0 mr-5" href="/">
    <img alt="" class="d-inline-block mr-1" height="35" src="img/brand.svg" />
    <span class="align-bottom">PAGE TITLE</span>
  </a>
  <button class="navbar-toggler" data-target="#navbarContent" data-toggle="collapse" type="button">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarContent">
    <div class="form-inline ml-auto">
      <button class="btn btn-danger mr-2" onclick="clear()" title="clear" type="button">
        <span class="fas fa-user-slash fa-fw"></span>
      </button>

      <div class="input-group my-2">
        <div class="input-group-prepend">
          <span class="input-group-text">
            <span class="fas fa-money-bill-wave"></span>
          </span>
        </div>
        <input class="form-control text-right" id="total" readonly="readonly" type="number" value="0.00" />
        <div class="input-group-append">
          <span class="input-group-text">
            <span class="fas fa-euro-sign"></span>
          </span>
        </div>
      </div>

      <button class="btn btn-warning ml-md-2" onclick="save()" title="save" type="button">
        <span class="fas fa-save fa-fw"></span>
      </button>
    </div>
  </div>
</nav>

Answer 1

在 form-inline 上使用 flex-nowrap 来防止换行...

   <div class="collapse navbar-collapse" id="navbarContent">
        <div class="form-inline flex-nowrap ml-auto">
            <button class="btn btn-danger mr-2" onclick="clear()" title="clear" type="button">
                <span class="fas fa-user-slash fa-fw"></span>
            </button>
            <div class="input-group my-2">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <span class="fas fa-money-bill-wave"></span>
                    </span>
                </div>
                <input class="form-control text-right" id="total" readonly="readonly" type="number" value="0.00">
                <div class="input-group-append">
                    <span class="input-group-text">
            <span class="fas fa-euro-sign"></span>
                    </span>
                </div>
            </div>
            <button class="btn btn-warning ml-2" onclick="save()" title="save" type="button">
                <span class="fas fa-save fa-fw"></span>
            </button>
        </div>
    </div>

https://www.codeply.com/go/VqsFCA8SMq