Vue+Bootstrap导航栏form-inline内下拉菜单调整页面尺寸时换行问题求解

这个换行问题由Bootstrap .form-inline 类的默认响应式规则导致：视口宽度小于576px时，.form-inline 会切换内部元素的布局逻辑，同时默认开启flex换行，内部元素总宽度超过父容器宽度时就会自动换行。

可通过以下方案解决：

方案1：强制form容器不换行（最便捷） #

给你的form元素新增自定义样式，强制flex不换行即可：

1. 新增CSS样式：

.form-inline.no-wrap-form {
  flex-wrap: nowrap !important;
  align-items: center;
  width: auto;
}

2. 修改form标签的class属性：

<form class="form-inline no-wrap-form">
  <!-- 原有内部代码无需改动 -->
</form>

方案2：窄屏隐藏用户名（适配极小屏场景） #

如果需要兼容宽度极小的移动设备，即使强制不换行也会出现元素挤压的情况，可以给下拉菜单内的用户名添加响应式隐藏类，小于576px时仅展示头像，节省横向空间：
修改下拉区域的用户名容器代码即可：

<!-- 添加d-none d-sm-block类，小屏自动隐藏该区域 -->
<div class="media-body ml-3 d-none d-sm-block">
  Usuário
  <app-svgs/>
</div>

方案3：替换布局方式（规范写法） #

如果是在Bootstrap导航栏内嵌入该表单，不需要额外套.form-inline类，直接将元素放在.navbar-nav同级的弹性容器内即可，导航栏原生的flex布局默认适配不换行逻辑，无需额外写自定义样式。

内容的提问来源于stack exchange，提问作者maistack123