Bootstrap 3表单元素并排组合

我有2个选项卡和2个表单。其次选项卡一切都很好，但我需要第一个标签的帮助。在第一个标签中选择一个菜单，一个文本输入和一个按钮。我想通过这面3元方和组合，感谢您的帮助......Bootstrap 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>

来源

2017-02-18 Koray

与现有的标记，加入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>

来源

2017-02-18 20:36:23 LGSon

是的，我想这样，谢谢一百万:) – Koray

两个选项：

使用引导电网系统对齐单个行中的字段，将所有表单保存在一个.row中，每个字段的类别为.col-**-**，大小为你的选择。你可以阅读更多关于bootstrap的网格here。
用form标记附上第一个标签，并为其提供引导程序的.form-inline类。你可以阅读更多关于它here。

来源

2017-02-18 20:22:59

感谢您的回复，但我想结合像2个选项卡元素，当添加类col-md是两个元素之间的空间，我想并排，组合和响应。 – Koray

对于你想要的东西没有开箱即用的解决方案，你可以跟上'col-md'并用你自己的代码覆盖bootstreap css：add'margin：0;填充：0;'到那些输入字段，所以他们会粘在一起。 –

至于响应能力：使用网格系统，使其响应不同的屏幕尺寸（'xs'，'sm'，'md'，'lg'） –

由于您已经有引导程序，因此可以按如下所示更改第一个选项卡。 col-xs-5 col-xs-5 col-xs-2，最多可添加12个，这是引导程序如何调整页面的大小。

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

来源

2017-02-18 20:30:30

是的，但没有合并空间beetwen two请使用第二个标签。 Thans寻求帮助.. – Koray

Bootstrap 3表单元素并排组合

回答

相关问题