Bootstrap 3并排形成元素并组合答案

【问题标题】：Bootstrap 3 form element side by side and combinedBootstrap 3并排形成元素并组合
【发布时间】：2017-02-18 20:13:21
【问题描述】：

我有 2 个标签和 2 个表单。在第二个标签中，一切都很好，但我需要第一个标签的帮助。在第一个选项卡中，一个选择菜单、一个文本输入和一个按钮。我想要这 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>

【问题讨论】：

标签： html forms twitter-bootstrap element

【解决方案1】：

使用现有标记，在 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>

堆栈sn-p

<!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>

【讨论】：

【解决方案2】：

两个选项：

使用引导网格系统对齐单行中的字段，将所有表单保存在单个.row 中，每个字段都有一个.col-**-** 类，可以选择大小。你可以阅读更多关于引导程序的网格here。
用form 标记将第一个选项卡括起来，并为其指定引导程序的.form-inline 类。你可以阅读更多关于它的信息here。

【讨论】：

感谢您的回复，但我想像 2 个选项卡元素一样组合，当添加 col-md 类作为两个元素之间的空格时，我希望并排、组合和响应。
没有开箱即用的解决方案可以满足您的需求，您可以跟上col-md 并用您自己的覆盖引导 css：将 margin: 0; padding: 0; 添加到这些输入字段中，这样他们就会粘在一起。
关于响应能力：使用网格系统使其响应不同的屏幕尺寸（xs，sm，md，lg）

【解决方案3】：

由于您已经有引导程序，您可以按如下方式更改第一个选项卡。 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>

【讨论】：

是的，就像这样，但请不要将两个元素（如第二个选项卡）结合起来。谢谢你的帮助..