4.7.2　导航条中的表单

很多情况下，我们想把表单元素放在导航条里，以起到导航效果，比如支持搜索等。Bootstrap专门提供了一个附件样式.navbar-form来实现图4-41所示的效果。

4.7.2　导航条中的表单 - 图1 图4-41　表单在导航条中的运行效果

使用方式是，在.navbar容器内放置form元素，然后在form元素上应用.navbar-form样式即可。同时左右浮动的样式（.navbar-left和.navbar-right）也可以使用，以便控制左右对齐。示例如下：

  1. <nav class="navbar navbar-default" role="navigation">
  2.     <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
  3.     <form class="navbar-form navbar-left" role="search">
  4.         <div class="form-group"><input type="text" class="form-control" 
  5.                    placeholder="Search"></div>
  6.         <button type="submit" class="btn btn-default">左按钮</button>
  7.     </form>
  8.     <form class="navbar-form navbar-right" role="search">
  9.         <div class="form-group"><input type="text" class="form-control" 
  10.                    placeholder="Search"></div>
  11.         <button type="submit" class="btn btn-default">右按钮</button>
  12.     </form>
  13. </nav>

在源码实现上，主要是确保所有的表单控件元素都设置成内联块（inline-block）的形式显示，并且确保特殊的radio和checkbox元素垂直居中即可。源码如下：

  1. // 源码3846行
  2. .navbar-form {
  3.   padding: 10px 15px;
  4.   margin-top: 8px;      /* 减少margin值 */
  5.   margin-right: -15px;
  6.   margin-bottom: 8px;
  7.   margin-left: -15px;
  8.   border-top: 1px solid transparent;
  9.   border-bottom: 1px solid transparent;
  10.   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 
  11.            255, 255, .1);
  12.           box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 
  13.                    255, 255, .1);
  14. }
  15. @media (min-width: 768px) {     /* input、select、textarea、radio、checkbox都设置为
  16.                                        内联块显示 */
  17.   .navbar-form .form-group {    display: inline-block;  margin-bottom: 0;
  18.            vertical-align: middle;  }
  19.   .navbar-form .form-control {  display: inline-block;  width: auto;    
  20.            vertical-align: middle;  }
  21.   .navbar-form .control-label {    margin-bottom: 0;    vertical-align: middle;  }
  22.   .navbar-form .radio,
  23.   .navbar-form .checkbox {
  24.     display: inline-block;    padding-left: 0;
  25.     margin-top: 0;    margin-bottom: 0;    vertical-align: middle;
  26.   }
  27.   .navbar-form .radio input[type="radio"],
  28.   .navbar-form .checkbox input[type="checkbox"] {
  29.     float: none;    margin-left: 0;
  30.   }
  31.   .navbar-form .has-feedback .form-control-feedback {    top: 0;  }
  32. }
  33. @media (max-width: 767px) {             /* 窄屏浏览器下，设置底部外边距*/
  34.   .navbar-form .form-group {    margin-bottom: 5px;  }
  35. }
  36. @media (min-width: 768px) {             /* 普通宽屏浏览器下*/
  37.   .navbar-form {
  38.     width: auto;
  39.     padding-top: 0;             /* 去除上下内边距*/
  40.     padding-bottom: 0;
  41.     margin-right: 0;            /*去除左右外边距*/
  42.     margin-left: 0;
  43.     border: 0;
  44.     -webkit-box-shadow: none;   /* 取消阴影*/
  45.             box-shadow: none;
  46.   }
  47.   .navbar-form.navbar-right:last-child {
  48.     margin-right: -15px;                /* 最后一个元素，设置负的margin，以便对齐*/
  49.   }
  50. }

注意

如果在表单内没有为输入框添加label标签，屏幕阅读器将会遇到问题。对于导航条内的表单，可以通过.sr-only样式来隐藏label标签。