Bootstrap 3 - 在导航栏中展开并居中搜索栏

Question

我的视图中有一个如下所示的搜索栏：

我想将它的宽度加倍并居中，有点像这个例子：Bootstrap 3 - How to maximize input width inside navbar

这是我的部分导航栏：

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a href="{{ url('/schedulizer') }}">Home</a></li>
            <li><a href="{{ url('/schedulizer/search') }}">Search</a></li>

            {{-- Show search bar if we're not in the search page --}}
            @if(Request::url() !== URL('schedulizer/search'))
                {{-- TODO: Remove in-line style --}}
                <li style="top: 8px"> @include('search.form')</li>
            @endif
        </ul>
    </div>

其中 search.form 是：

{!! Form::open([
    'action' => ['SchedulizerController@results'],
    'method' => 'GET',
    'class' => 'form-inline'
]) !!}
    <div class="col-lg-10">
        <div class="input-group">
            {!! Form::text('q', $term, [
                'class' => 'form-control',
                'id' =>  'q',
                'placeholder' =>  'i.e. ECE 201, Digital Logic, Kandasamy, or 41045'
            ]) !!}
        <span class="input-group-btn">
            {!! Form::submit('Search', array('class' => 'btn btn-primary')) !!}
        </span>
        </div>
    </div>
{!! Form::close() !!}

@include('js.classes-autocomplete')

我尝试将宽度设置为 100%.. 以对宽度进行硬编码。但最终无法延长。

附上纯正的HTML:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="http://app.dev/schedulizer">Home</a></li>
                <li><a href="http://app.dev/schedulizer/search">Search</a></li>

                                                                        <li style="top: 8px"> <form method="GET" action="http://app.dev/schedulizer/results" accept-charset="UTF-8" class="form-inline">
    <div class="col-lg-10">
        <div class="input-group">
            <input class="form-control" id="q" placeholder="i.e. ECE 201, Digital Logic, Kandasamy, or 41045" name="q" type="text" value="ECEC 355 Computer Organization &amp; Architecture ">
        <span class="input-group-btn">
            <input class="btn btn-primary" type="submit" value="Search">
        </span>
        </div>

Answer 1

这可能会有帮助。

.navbar-default #formID #q {
  min-width: 325px;
}
.navbar-default .navbar-collapse {
  text-align: center;
}
@media (max-width: 768px) {
  .navbar-default #formID #q {
    min-width: 100%;
  }
  .navbar-default .navbar-collapse {
    text-align: left;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">Schedulizer</a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home <span class="sr-only">(current)</span></a>

        </li>
        <li><a href="#">Search</a>

        </li>
      </ul>
      <form class="navbar-form" role="search" id="formID">
        <div class="input-group">
          <input class="form-control" id="q" placeholder="i.e. ECE 201, Digital Logic, Kandasamy, or 41045" name="q" type="text" value="ECEC 355 Computer Organization &amp; Architecture " /> <span class="input-group-btn">
            <input class="btn btn-primary" type="submit" value="Search"/>
        </span>

        </div>
      </form>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

它只是了解组件属性（或进入 CSS/JS 查找），因此您可以根据最终需要调整它们。

举个例子：搜索输入宽度，你必须给它分配一个固定的宽度，因为即使是 100%，它也会受到我设置为 width:auto 的 .form-control 元素的限制，所以它否则不会改变。基于其他导航组件设置合理的 with 以便它响应设备宽度变化，当它确实发生变化时，重置宽度（在本例中为@768px）。

这就是它的全部内容，同时还要考虑事物将如何流入或流出不断变化的设备宽度。

希望这对您有所帮助。

Bootstrap 3 - 在导航栏中展开并居中搜索栏

Bootstrap 3 - Expand and center search bar in nav bar

css

twitter-bootstrap

blade