Question

代码：（使用bootstrap3和jQuery）

<body>

  <div class="navbar navbar-fixed-top" style="background-color: transparent; max-height: 50px;">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">

        </div>

        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px;">
            <li><a href="#" class="icon_navbar" data-toggle="collapse" data-target=".navbar-collapse1" style="padding: 15px;"><i class="glyphicon glyphicon-menu-down icon_navbar_color"></i></a></li>
          </ul>
        </div>
      </div>

      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <div class="collapse navbar-collapse1" style="">
            <form class="navbar-form">
              <div class="input-group input-group-sm" style="max-width: 100%;">
                <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
                <div class="input-group-btn">
                  <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search icon_navbar_color"></i></button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>

    </div>
  </div>

</body>

jsfiddle： https://jsfiddle.net/o2daoew5/

此代码在collapsed div下执行开放navbar。

当浏览器的宽度小于768px时，它的输入条足够宽。

但浏览器的宽度大于或等于768px，它的输入条变短。

问题：

我想让这个输入栏的宽度完全响应浏览器的宽度。不会变短。我该如何解决？

Answer 1

使用课程form而不是navbar-form

  <div class="collapse navbar-collapse1" style="">
    <form class="form">
      <div class="input-group input-group-sm" style="max-width: 100%;">
        <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search icon_navbar_color"></i></button>
        </div>
      </div>
    </form>
  </div>

当浏览器的宽度> = 768px时，折叠的输入栏更窄

1 个答案: