ブートストラップグリッドを使用して、フォームグループの一部を別の列に配置します

ブートストラップグリッドを使用して入力フォームの横の列に検索ボタンを配置しますが、「入力」タグと「ボタン」タグの両方が"form-group"属性を持つdivでは、これが困難になります。ブートストラップグリッドを使用して、フォームグループの一部を別の列に配置します

これは私の元のコードです：

<div class="row"> 
      <div class="col-md-12 formMove"> 
       <form id="getposts_form" role="form"> 
        <div class="form-group"> 
         <input type="text" class="form-control searchBar" id="search" name="search" placeholder=""> 
         <button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
         <br><div id="errors"></div> 
        </div> 
       </form> 
      </div> 
     </div><!--end row-->

そして、これは、ネストされた列を持つ私の失敗の試みです：事前に

<div class="row"> 
      <div class="col-md-12 formMove"> 
       <div class="row"> 
        <div class="col-md-10"> 
         <form id="getposts_form" role="form"> 
          <div class="form-group"> 
           <input type="text" class="form-control searchBar" id="search" name="search" placeholder=""> 
        </div> <!--I want this closing tag to close "col-md-10", but its closing the "form-group"--> 
        <div class="col-md-2"> 
           <button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
           <br><div id="errors"></div> 
          </div> 
         </form> 
        </div> 
       </div> 
      </div> 
     </div>

感謝。

出典

2017-03-01 kennsorr

なぜボタンと入力が同じform-group class内にあるのか理解できませんでした。別のフォームグループクラスを使用することができます。インライン形式が達成されるアプローチは、<form>タグ付きの.form-inlineクラスを使用しています。グリッドシステムを使用した回答が必要な場合は、そのためのスニペットも提供しています。

Iを加えたブートストラップグリッドシステムを用い.FORMインラインクラス

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
     
 
     <style type="text/css"> 
 
     
 
     </style> 
 
     <script type="text/javascript"> 
 
     
 
     </script> 
 
     </head> 
 
     <body> 
 
     
 
     
 

 
<div class="row"> 
 
      <div class="col-md-12 formMove"> 
 
       <form id="getposts_form" class="form-inline" role="form"> 
 
        <div class="form-group"> 
 
         <input type="text" class="form-control searchBar" id="search" name="search" placeholder=""> 
 
         </div> 
 
         <div class="form-group"> 
 
         <button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></div> 
 
         <br><div id="errors"></div> 
 
        
 
       </form> 
 
      </div> 
 
     </div><!--end row--> 
 
</body> 
 
</html>

を使用して、2つのスニペット

<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style type="text/css"> </style> <script type="text/javascript"> </script> </head> <body> <div class="row"> <div class="col-md-12 formMove"> <form id="getposts_form" class="form-inline" role="form"> <div class="form-group"> <div class="row"> <div class="col-md-8 col-lg-8 col-sm-8 col-xs-8"> <input type="text" class="form-control searchBar" id="search" name="search" placeholder=""> </div> <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4"> <button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></div> </div> <br><div id="errors"></div> </div> </form> </div> </div> </body>

出典

2017-03-01 05:02:02 neophyte

うわー。私は決してそれを考えなかったでしょう。ありがとう！ – kennsorr

ブートストラップグリッドを使用して、フォームグループの一部を別の列に配置します

答えて

関連する問題