如何在引导程序中调整我的输入表单的长度

Question

我正在处理我网站的导航栏，并希望在导航栏中添加一个搜索区域。导航栏中的原始引导程序嵌入式搜索区域太短，我想使其更长。 我尝试添加行并设置 col-xs-10 或类似的东西，但仍然不起作用。

这里附上我的代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Path</a>
    </div>
    <form class="navbar-form navbar-left form-horizontal">
      <div class="input-group">
        <input type="text" class="search-bar form-control" placeholder="Discover from here!">
        <div class="input-group-btn">
          <button class="search-btn btn btn-default" type="submit">
            <i class="search-icon glyphicon glyphicon-search"></i>
          </button>
        </div>
      </div>
    </form>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <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="#">Trending</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Message</a>
      </li>
        <button class="ask-btn btn btn-danger navbar-btn">Ask</button>
        <li class="login-btn"><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

尝试使用媒体查询并在navbar-form class 上设置宽度，然后对input-group 使用 col-xs-12。

@media(min-width:767px){
#navbar-form {
width: 45% !important;
}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-toggleable-md navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Path</a>
    </div>
    <form id= "navbar-form" class="navbar-form navbar-left form-horizontal">
      <div class="col-xs-12 input-group">
        <input type="text" class="search-bar form-control" placeholder="Discover from here!">
        <div class="input-group-btn">
          <button class="search-btn btn btn-default" type="submit">
            <i class="search-icon glyphicon glyphicon-search"></i>
          </button>
        </div>
      </div>
    </form>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <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="#">Trending</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Message</a>
        </li>
        <button class="ask-btn btn btn-danger navbar-btn">Ask</button>
        <li class="login-btn"><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 2

尝试将其添加到您的 css 中：

.navbar-form.navbar-left {
  width: 50%;
}

.navbar-form.navbar-left .input-group {
  width: 100%;
}

例如，请参阅fiddle。