Duyuruyu Kapat
Facebook Gözat
Twitter Gözat

Basit bir bootstrap sorusu, yan yana select ve input

Konu, 'Yazılım Geliştirme' kısmında fotogunes tarafından paylaşıldı.

  1. fotogunes

    fotogunes Aktif Üye

    Kayıt:
    11 Temmuz 2005
    Mesajlar:
    284
    Beğenilen Mesajlar:
    2
    Selam arkadaşlar, bootstrap ile iki tab ve iki inputtan oluşan bir arama formu yapmaya çalışıyorum. İkinci tab da sadece birleşik bir input ve buton var, ilk tab da ise bir select menü, bir input ve bir buton var. İşte ben bu select menü, input ve butonun hiçbir biçimsel değişikliğe uğramadan ikinci tab daki gibi birleşik ve yanyana olmasını istiyorum, bootstrapın sitesinden onlarca sınıf denedim ama bi türlü beceremedim, yardımcı olursanız sevinirim, teşekkürler.

    Örnek kodum bu şekilde;

    HTML:
    <!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="volvo">Elma</option>
                               <option value="saab">Armut</option>
                               <option value="mercedes">Portakal</option>
                               <option value="audi">Çilek</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>