Question

我正在使用我网站的导航栏，并希望在导航栏中添加搜索区域。导航栏中的原始引导嵌入式搜索区域太短，我想让它更长。我尝试添加行并设置col-xs-10或类似的东西，但仍然无法正常工作。

这里附上我的代码：

＆＃13;

<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>

＆＃13;

Answer 1

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

@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。

如何在bootstrap中调整输入表单的长度

2 个答案: