html - 许多导航栏按钮拉伸屏幕而不是环绕
问题描述
我的应用程序使用在运行时生成的导航栏按钮,有时它们会导致按钮行延伸到屏幕外而不是换行到下一行。这曾经在 bootstrap v4.0.0-alpha 中包装 OK,但在 v4.1.3 中不再包装。有没有办法让按钮换行到下一行而不是向右溢出并生成滚动条?
这是一些示例代码:
<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Many navbar buttons</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>Many navbar buttons</h1>
<nav class="navbar navbar-expand-md navbar-light">
<span class="navbar-brand"></span>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSelect" aria-controls="navbarSelect" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSelect">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button1" title="button1" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button2" title="button2" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button3" title="button3" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button4" title="button4" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button5" title="button5" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button6" title="button6" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button7" title="button7" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button8" title="button8" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button9" title="button9" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button10" title="button10" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button11" title="button11" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button12" title="button12" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button13" title="button13" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button14" title="button14" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button15" title="button15" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button16" title="button16" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button17" title="button17" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button18" title="button18" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button19" title="button19" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button20" title="button20" value="Button Text">
</li>
</ul>
</div>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>
</body>
</html>
解决方案
您需要做的就是添加flex-wrap: wrap
到.navbar-nav
css 类。
.navbar-nav {
flex-wrap: wrap;
}
<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Many navbar buttons</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>Many navbar buttons</h1>
<nav class="navbar navbar-expand-md navbar-light">
<span class="navbar-brand"></span>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSelect" aria-controls="navbarSelect" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSelect">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button1" title="button1" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button2" title="button2" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button3" title="button3" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button4" title="button4" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button5" title="button5" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button6" title="button6" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button7" title="button7" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button8" title="button8" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button9" title="button9" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button10" title="button10" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button11" title="button11" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button12" title="button12" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button13" title="button13" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button14" title="button14" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button15" title="button15" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button16" title="button16" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button17" title="button17" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button18" title="button18" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button19" title="button19" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button20" title="button20" value="Button Text">
</li>
</ul>
</div>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>
</body>
</html>
推荐阅读
- or-tools - 不考虑完成的提货交付或工具的数量,实现利润最大化
- react-native - React 本机模拟器无法在 windows10 中启动
- segment-tree - 延迟传播范围更新
- c - 假设 NULL 常量为零是否安全?
- php - Mysql - Docker:连接问题
- python - 为什么我合并两个数据框并得到一个 NaN 列
- delphi - 如何使在运行时创建的相同表单的表单访问变量?
- javafx - 使用Java实时生成音频波形
- java - 如何使用 icu4j Charset 实现和 CharsetDecoderICU?
- javascript - 将 onCLick 传递给导入的组件,做出反应