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％时，它也受.form-control元素的限制，我将其设置为width:auto，因此它不会否则改变。根据其他导航组件设置合理的，以便响应设备宽度变化，当它发生变化时，重置宽度（在这种情况下为@ 768px）。

所有这一切都需要考虑事物将如何流入或流出不断变化的设备宽度。

希望这有帮助。

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

1 个答案: