html - 减小页面宽度时防止导航项换行
问题描述
大家好,我已经使用 react-bootstrap 创建了一个 react 应用程序,并且正在创建一个标题导航栏。我有一个导航品牌和两个导航项目。右侧的导航项是一个输入组。问题是输入组在减小页面宽度时会换行,我只希望输入组在调整大小时保持在同一行。
这是我的代码: https ://repl.it/repls/IrresponsibleCuddlyConversions#index.html
任何帮助将非常感激!
解决方案
在 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>
推荐阅读
- c# - 如何遍历包含一个字典的字典,该字典包含另一个字典,该字典包含一个列表
- vba - 从 Access 自动通过电子邮件发送报告
- shopify - 集合页面中的尺寸变体
- firebase - Android 未捕获 Firestore 事务 PlatformException
- c++ - 有没有办法插入矢量
进入带有 bytea 属性的 postgresql 表,没有 UTF8 编码错误? - magento - 在 Magento 2 发票电子邮件中编辑元素
- python - 如何在python中拆分一串字母两个数字和一个数字?
- c# - 为什么 C# 中的位图在保存时会扩大图像的文件大小?
- javascript - JavaScript 正则表达式将 url 分解为域和路径
- python - 按行拆分稀疏矩阵