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

Posted 2023-03-05

【中文标题】如何在 twitter bootstrap3 的导航栏中增加搜索栏的宽度

【英文标题】：How to increase the width of search bar in the navbar in twitter bootstrap3

【发布时间】：2013-09-29 12:49:25

【问题描述】：

我无法在 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>

导航栏如下所示：

【问题讨论】：

Bootstrap 3 - How to maximize input width inside navbar的可能重复

@BassJobsen 但是这个问题解决了将搜索栏完全安装在中间的剩余空间中的问题。我想设置搜索栏的自定义宽度，但它应该是响应式的

【参考方案1】：

在你的 main.css 中添加这个类并缩放宽度

CSS

.home-search 
   width: 500px;
 

【讨论】：

我已经尝试过了，但它是特定的，所以它没有响应。

如果你使用百分比值？

即便如此，它还是超出了小屏幕设备的视口

【参考方案2】：

@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 的宽度：auto）。

尝试以这样的方式使用网格类，即每个网格的列总和为 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>    

【参考方案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>