Question

刚下载了Bootstrap 4 Dashboard模板，正在尝试将表单添加到顶部搜索栏。当我这样做时，搜索栏缩小并失去它的设计。

我可以通过html / CSS来解决如何在不破坏设计的情况下实现这一目标，而不是熟悉Bootstrap 4中新增和添加的CSS。

试过这个，但就像我说的那样，形式缩小到中心：

<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
  <a class="navbar-brand col-sm-4 col-md-2 mr-0" href="#">My Site</a>
    <form action="search.php" method="POST">
      <input class="form-control form-control-dark w-100" type="text" placeholder="Search">
    </form>
  <ul class="navbar-nav px-3">
    <li class="nav-item text-nowrap">
      <a class="nav-link" href="logout.php">Log out</a>
    </li>
  </ul>
</nav>

Answer 1

只需将w-100从输入移动到表单。

<form action="search.php" method="POST" class="w-100">
      <input class="form-control form-control-dark" type="text" placeholder="Search">
</form>

Demo

这将形成width:100%。

形式

Answer 2

输入标记的宽度为：100％，这是一个相对值。现在您已将表单标记添加为输入的父级，它的宽度也必须为100％。

尝试用此替换代码进行测试（现在给出内联css）：

<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
  <a class="navbar-brand col-sm-4 col-md-2 mr-0" href="#">My Site</a>
    <form action="search.php" method="POST" style="width: 100%">
      <input class="form-control form-control-dark w-100" type="text" placeholder="Search">
    </form>
  <ul class="navbar-nav px-3">
    <li class="nav-item text-nowrap">
      <a class="nav-link" href="logout.php">Log out</a>
    </li>
  </ul>
</nav>

如何在Bootstrap 4仪表板模板中向搜索栏添加功能

2 个答案: