ブートストラップ3のフォーム要素を並べて組み合わせた

2つのタブと2つのフォームがあります。 2番目のタブではすべてが良いですが、私は最初のタブのヘルプが必要です。最初のタブ1の選択メニューでは、1つのテキスト入力と1つのボタン。私は並んで、この3要素の側をしたいと組み合わせた、助けてくれてありがとう...ブートストラップ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>を追加すると、スタックが

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

スニペット

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>

ことを解決します

出典

2017-02-18 20:36:23 LGSon

はい、私はこれのようにしたい、感謝百万:) – Koray

つのオプション：

使用ブートストラップグリッドシステムを使用して、フィールドを1行に整列させ、すべてのフォームを.rowの1つのフィールドに入れ、それぞれのフィールドのサイズを.col-**-**にしますあなたの選択。ブートストラップのグリッドhereについて詳しく読むことができます。
最初のタブをformタグで囲み、ブートストラップに.form-inlineクラスを付けます。あなたはそれについての詳細を読むことができますhere。

出典

2017-02-18 20:22:59

お返事ありがとうございますが、2つのタブ要素のように組み合わせたい場合、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

はい、このようになりますが、 2番目のタブのような要素でお願いします。 Thans for help .. – Koray

ブートストラップ3のフォーム要素を並べて組み合わせた

答えて

関連する問題