Bootstrap 3 个表单元素并排组合

Question

我有 2 个选项卡和 2 个表单。在第二个选项卡中，一切都很好，但我需要第一个选项卡的帮助。在第一个选项卡中，一个 select 菜单、一个文本输入和一个按钮。我想要这 3 个元素并排组合，感谢您的帮助...

我的代码..

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <title>Bootstrap Tab</title>
      <!-- Bootstrap -->
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <!-- Optional theme -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
      <style type="text/css">
         .panel.with-nav-tabs .panel-heading{
         padding: 5px 5px 0 5px;
         }
         .panel.with-nav-tabs .nav-tabs{
         border-bottom: none;
         }
         .panel.with-nav-tabs .nav-justified{
         margin-bottom: -1px;
         }
         /********************************************************************/
         /*** PANEL DEFAULT ***/
         .with-nav-tabs.panel-default .nav-tabs > li > a,
         .with-nav-tabs.panel-default .nav-tabs > li > a:hover,
         .with-nav-tabs.panel-default .nav-tabs > li > a:focus {
         color: #777;
         }
         .with-nav-tabs.panel-default .nav-tabs > .open > a,
         .with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
         .with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
         .with-nav-tabs.panel-default .nav-tabs > li > a:hover,
         .with-nav-tabs.panel-default .nav-tabs > li > a:focus {
         color: #777;
         background-color: #ddd;
         border-color: transparent;
         }
         .with-nav-tabs.panel-default .nav-tabs > li.active > a,
         .with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
         .with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
         color: #555;
         background-color: #fff;
         border-color: #ddd;
         border-bottom-color: transparent;
         }
         .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
         background-color: #f5f5f5;
         border-color: #ddd;
         }
         .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
         color: #777;   
         }
         .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
         .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
         background-color: #ddd;
         }
         .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
         .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
         .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
         color: #fff;
         background-color: #555;
         }
      </style>
   </head>
   <body>
      <div class="col-md-6 col-md-offset-3">
         <div class="panel with-nav-tabs panel-default">
            <div class="panel-heading">
               <ul class="nav nav-tabs">
                  <li class="active"><a href="#tab1default" data-toggle="tab">Arama 1</a></li>
                  <li><a href="#tab2default" data-toggle="tab">Arama 2</a></li>
               </ul>
            </div>
            <div class="panel-body">
               <div class="tab-content">
                  <div class="tab-pane fade in active" id="tab1default">
                     <div class="input-group">
                        <select class="form-control">
                           <option value="ist">istanbul</option>
                           <option value="ank">ankara</option>
                           <option value="izm">izmir</option>
                           <option value="adn">adana</option>
                        </select>
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                        </span>
                     </div>
                     <!-- /input-group -->
                  </div>
                  <div class="tab-pane fade" id="tab2default">
                     <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search for...">
                        <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                        </span>
                     </div>
                     <!-- /input-group -->
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </body>
</html>

Answer 1

两个选项：

使用 bootstrap 网格系统将字段排列在一行中，将所有表单保存在一个 .row 中，每个字段的 class 为 .col-**-** , 成为您选择的尺寸。您可以阅读有关 bootstrap 的网格 here 的更多信息。
用 form 标记将第一个选项卡括起来，并给它 bootstrap 的 .form-inline class。您可以阅读更多相关信息 here.

Answer 2

因为您已经 bootstrap，您可以按如下方式更改第一个选项卡。 col-xs-5 col-xs-5 col-xs-2 加起来为 12，这就是 bootstrap 页面大小的大小。

       <div class="tab-pane fade in active" id="tab1default">
          <div class="row" >

              <div class="col-xs-5">
              <select class="form-control">
                       <option value="ist">istanbul</option>
                       <option value="ank">ankara</option>
                       <option value="izm">izmir</option>
                       <option value="adn">adana</option>
                    </select>
              </div>
               <div class="col-xs-5">
               <input type="text" class="form-control">
               </div>
                <div class="col-xs-2">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!     </button>
                    </span>
               </div>

        </div>
     </div>

Answer 3

使用现有标记，在 select 和 input 之间添加 <span class="input-group-btn" style="width:0px;"></span> 将解决

HTML片段

<div class="input-group">
  <select class="form-control">
    <option value="ist">istanbul</option>
    <option value="ank">ankara</option>
    <option value="izm">izmir</option>
    <option value="adn">adana</option>
  </select>
  <span class="input-group-btn" style="width:0px;"></span>   <!--  added it here  -->
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
</div>

堆栈片段

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <title>Bootstrap Tab</title>
      <!-- Bootstrap -->
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <!-- Optional theme -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
      <style type="text/css">
         .panel.with-nav-tabs .panel-heading{
         padding: 5px 5px 0 5px;
         }
         .panel.with-nav-tabs .nav-tabs{
         border-bottom: none;
         }
         .panel.with-nav-tabs .nav-justified{
         margin-bottom: -1px;
         }
         /********************************************************************/
         /*** PANEL DEFAULT ***/
         .with-nav-tabs.panel-default .nav-tabs > li > a,
         .with-nav-tabs.panel-default .nav-tabs > li > a:hover,
         .with-nav-tabs.panel-default .nav-tabs > li > a:focus {
         color: #777;
         }
         .with-nav-tabs.panel-default .nav-tabs > .open > a,
         .with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
         .with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
         .with-nav-tabs.panel-default .nav-tabs > li > a:hover,
         .with-nav-tabs.panel-default .nav-tabs > li > a:focus {
         color: #777;
         background-color: #ddd;
         border-color: transparent;
         }
         .with-nav-tabs.panel-default .nav-tabs > li.active > a,
         .with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
         .with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
         color: #555;
         background-color: #fff;
         border-color: #ddd;
         border-bottom-color: transparent;
         }
         .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
         background-color: #f5f5f5;
         border-color: #ddd;
         }
         .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
         color: #777;   
         }
         .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
         .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
         background-color: #ddd;
         }
         .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
         .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
         .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
         color: #fff;
         background-color: #555;
         }
      </style>
   </head>
   <body>
      <div class="col-md-6 col-md-offset-3">
         <div class="panel with-nav-tabs panel-default">
            <div class="panel-heading">
               <ul class="nav nav-tabs">
                  <li class="active"><a href="#tab1default" data-toggle="tab">Arama 1</a></li>
                  <li><a href="#tab2default" data-toggle="tab">Arama 2</a></li>
               </ul>
            </div>
            <div class="panel-body">
               <div class="tab-content">
                  <div class="tab-pane fade in active" id="tab1default">
                     <div class="input-group">
                        <select class="form-control">
                           <option value="ist">istanbul</option>
                           <option value="ank">ankara</option>
                           <option value="izm">izmir</option>
                           <option value="adn">adana</option>
                        </select>
                        <span class="input-group-btn" style="width:0px;"></span>
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                        </span>
                     </div>
                     <!-- /input-group -->
                  </div>
                  <div class="tab-pane fade" id="tab2default">
                     <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search for...">
                        <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                        </span>
                     </div>
                     <!-- /input-group -->
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </body>
</html>

Bootstrap 3 个表单元素并排组合

Bootstrap 3 form element side by side and combined

html

forms

element

twitter-bootstrap