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表單元素並排組合

回答

相關問題