链接显示为两行（React、css）

我有一些

标题

：

<header>
 <div>                              
  <Link to="/" class="navbar-brand">Home</Link>
  <Link to="/test" class="navbar-brand">Test</Link>
  <Link to="/test2" class="navbar-brand">Test2</Link>
  <Link to="/test3" class="navbar-brand">Test3</Link>
 </div>
</header>

当我试图将其显示在

手机中时，它看起来像
链接
分成两行

有可能以某种方式使它变小，显示成一行吗

手机屏幕：

您可以尝试以下方法来防止flex容器收缩：

header {
  background: rgb(73, 176, 236);
  display: flex;
  align-items: center;
  flex: 1 0 auto
} 

此外，为了获得更好的用户界面，您可以使用相对单位，例如
rem
。这是代理的基本字体大小（在大多数浏览器上为16像素）

然后根据视口更改基本字体：

@media only screen and (max-width: 600px) {
  body {
      font-size: 12px;
  }
}

这将允许您进行缩放，因为您用于选择器的所有
rem
单位现在将相应地增加和减少。
您对手机的定义是什么？我不明白，你可以添加一个屏幕截图或者一个提琴吗？当然，请查看更新-我在手机上打开我的网站时，它看起来像在图片上。如果你给我一个提琴，那就太好了，但是试试这个：标题选择器上的“flex:10 auto”这将防止你的flex容器缩小，但是如果你想更好地显示这些文本，我建议你用rem设置你的字体，我也能想到很多其他的解决方案。好吧-你把这两个作为答案：我是说flex和add please
rem
Im刚刚开始使用css/react，因为我主要关注后端-C#/OracleI我理解。。。这是一个有趣的探索空间：）
font-size: 1rem;

@media only screen and (max-width: 600px) {
  body {
      font-size: 12px;
  }
}