我想用bootstrap创建一个导航栏，但我一直在努力让按钮看起来更漂亮。由于某种原因，在按钮文本中插入空格后，bootstrap在两个单词之间添加了新行。这看起来很糟糕，我该如何修复它呢？用这段代码我得到了：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-primary" type="submit">Test</button>
</form>
</div>
</nav>然而，在按钮文本内添加空格后，我得到了以下结果：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-primary" type="submit">T est</button>
</form>
</div>
</nav>我如何使它在一行中，即使有空格？
1条答案
按热度按时间ax6ht2ek1#
引导程序的容器是flexbox元素。这意味着按钮将折叠以占用其最小的水平空间。您可以使用文本换行实用程序类来防止这种情况。