html - 如何在 Bootstrap 中调整我的输入表单的长度

Question

我正在处理我网站的导航栏，想在导航栏中添加一个搜索区域。 navbar 中原来的 bootstrap 嵌入式搜索区域太短了，我想把它弄长一点。我尝试添加行并设置 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>