减小页面宽度时防止导航项换行答案

【问题标题】：Prevent nav item to a new line when reduce page width减小页面宽度时防止导航项换行
【发布时间】：2020-05-26 04:50:59
【问题描述】：

大家好，我已经使用 react-bootstrap 创建了一个 react 应用程序，并且正在创建一个标题导航栏。我有一个导航品牌和两个导航项目。右侧的导航项是一个输入组。问题是输入组在减小页面宽度时会换行，我只希望输入组在调整大小时保持在同一行。

这是我的代码： https://repl.it/repls/IrresponsibleCuddlyConversions#index.html

任何帮助将不胜感激！

【问题讨论】：

你能提供工作代码的链接吗？
这是工作代码的链接。 repl.it/repls/IrresponsibleCuddlyConversions#index.html
请在您的问题中发布minimal reproducible example
@AndyHoffman 请让用户在他们的问题中发布代码示例，而不是指向网站的链接。一旦问题得到解决或链接到的网站无法访问，此问题将对未来的访问者失去任何价值

标签： html css

【解决方案1】：

在 css 中设置 min-width 和 max-width 值是防止导航元素在屏幕宽度更改时堆叠在另一个下方的最简单方法。

这里是指定最小宽度和最大宽度的更新文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          rel="stylesheet"/>
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
     <div class="container">
      <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-primary" 
      style="min-width: 480px;">
    <div class="navbar-brand ml-3">
            <button>btn</button>
    </div>

    <div class='nav-item'>
        <h3 class='d-sm-block text-nowrap' style="max-width: 200px;">PROJECT TITLE</h3>
    </div>
    <div class="input-group ml-2 nav-item" style="width: 150px; max-width: 150px; margin-left: auto; margin-right: 0px;">
        <input class="form-control"
               type="search"
               placeholder="New Stuff..."/>
        <span class='input-group-btn'>
        <button class="btn btn-danger" type="submit">
            ...
        </button>
               </span>
    </div>
</nav>
      </div>
  </body>
</html>

【讨论】：