我的应用程序使用在运行时生成的导航栏按钮，有时它们太多，它们会导致按钮行延伸到屏幕之外，而不是缠绕到下一行。这曾经将OK包装在bootstrap v4.0.0-alpha中，但不再包含在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>
答案 0 :(得分：0)
您需要做的就是将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>