Question

我无法在twitter bootstrap3中增加导航栏搜索框的大小。我已经尝试将它们作为网格，但即便如此它也不起作用。我不能用百分比增加搜索框的大小，因为在移动设备上看到搜索栏与其他内容相比看起来太长了。这是我一直使用的导航栏代码：

<nav class="navbar navbar-default nav-margin-bottom navbar-fixed-top" role="navigation">
    <div class="row">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header col-md-1">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <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="#" style="font-weight:500%; font-family:Roboto; margin-left:18px;">Test</a> 
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse col-md-10">
      <div class="col-md-5">
        <form class="navbar-form navbar-left" role="search">
            <input type="text" class="form-control home-search" placeholder="Search" >
        </form>
      </div>
      <div class="col-md-7 navbar-right">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><b>Abcd</b></a></li>
          <li><a href="#"><b>Efgh</b></a></li>
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Ijkl</b><b class="caret"></b></a>
            <!-- Link or button to toggle dropdown -->
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Mno</b></a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Pqrs</b></a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Settings</b></a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Log out</b></a></li>
            </ul>
          </li>
        </ul>
      </div>
      </div><!-- /.navbar-collapse -->
    </div> <!-- /.row -->
  </nav>

导航栏看起来像这样：

Answer 1

来自@marvin的解决方案似乎有效（覆盖全部），您可以通过添加以下媒体查询来提高响应速度：

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { .home-search { width: 400px; }}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { .home-search { width: 600px; } }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { .home-search { width: 800px; } }

真正的问题似乎是你使用网格类设置宽度的方式：

你使用：

<div class="collapse navbar-collapse col-md-10">
      <div class="col-md-5">

由于嵌套，表单的可用空间变为（10/12）*（5/12）* 100 =视口的34％。您还可以使用navbar-left作为表单，该表单还会阻止右侧输入的扩展（由于navbar-form的宽度：自动）。

尝试使用网格类，使得每个网格的列总计为12，如

<div class="navbar-header col-sm-1 col-md-1 col-lg-1">Logo</div>
<div class="collapse navbar-collapse">
<div class="col-sm-6 col-md-7 col-lg-8">searchform</div>
<div class="col-sm-5 col-md-4 col-lg-3 navbar-right">Right nav</div>

导致类似：

<nav class="navbar navbar-default nav-margin-bottom" role="navigation">
    <div class="row">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header col-sm-1 col-md-1 col-lg-1">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <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="#" style="font-weight:500%; font-family:Roboto; margin-left:18px;">Test</a> 
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse">
      <div class="col-sm-6 col-md-7 col-lg-8">
        <form class="navbar-form" role="search">
            <input type="text" class="form-control" placeholder="Search" >
        </form>
      </div>
      <div class="col-sm-5 col-md-4 col-lg-3 navbar-right">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><b>Abcd</b></a></li>
          <li><a href="#"><b>Efgh</b></a></li>
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Ijkl</b><b class="caret"></b></a>
            <!-- Link or button to toggle dropdown -->
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Mno</b></a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Pqrs</b></a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Settings</b></a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Log out</b></a></li>
            </ul>
          </li>
        </ul>
      </div>
      </div><!-- /.navbar-collapse -->
    </div> <!-- /.row -->
  </nav>

Answer 2

在main.css中添加此类并缩放宽度

<强> CSS

.home-search {
   width: 500px;
 }

Answer 3

您好，我目前遇到同样的问题，但我想出来了，它对我有用，希望它对您有用也看看

<div class="collapse navbar-collapse" id="toggleNavigation">
    <div class="col-sm-5">
        <form class="form" role="search" style="margin-top: 8px;">
            <div class="input-group">
                <input type="search" placeholder="Query?" class="form-control">
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-warning">
                        <i class="fa fa-search" aria-hidden="true"></i>
                    </button>
                </span>
            </div>
        </form>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
        </ul>
    </div>
</div>

如何在twitter bootstrap3中增加导航栏中搜索栏的宽度

3 个答案: