相关疑难解决方法(0)

如何在导航栏中创建100%的搜索输入宽度？

该领域的宽度有限:

<nav class="navbar navbar-light navbar-dark bg-inverse">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>

  <ul class="nav navbar-nav pull-xs-right">
    <li class="nav-item">
      <form class="form-inline ">
        <input class="form-control" type="text" placeholder="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">User Name</a>
    </li>
  </ul>
</nav>

这是小提琴:

https://jsfiddle.net/Dieselnick/tdoz2o4d/

自从2.4.3形式发生了变化,这会再出现,但没有奏效.

这是我搜索栏的当前代码.

<li>
   <div class="input-group" id="fifteenMargin">
      <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
   </div>
</li>

这就是它目前的样子.

我希望它最终看起来像这样.

虽然这个问题与这个问题很接近,但它的不同之处在于外面只有一个按钮,两者之间没有空间.这是如何进入搜索栏.

我想嵌入一个简单的输入搜索框.我尝试使用像bootstrap中的代码,但我无法使其工作.我不知道怎么做.

我有这个引导代码:

<div class="col-sm-3 col-md-3 pull-right">
    <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search"
                                                    name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit">
                    <i class="glyphicon glyphicon-search"></i>
                </button>
            </div>
        </div>
    </form>
</div>

参考:如何添加搜索框