Bootstrap幫助兩種形式

Question

請幫我理解我是否更正了此圖像的代碼。我沒有完成，因爲我不確定這是否正確。

Two forms for bootstrap image

自舉：

<div class="home-top-selects container-fluid"> 
    <div class="row"> 
     <div class="consulter-form col-sm-5 col-md-5 col-lg-5"> 
      <h2>Consulter les petites annonces</h2> 
      <div class="form-group container"> 
       <h4>Par mot-cle les petites annonces<h4> 
       <div class="row"> 
        <div class="col-md-3"> 
         <input type="text" class="form-control" id="usr"> 
        </div> 
        <div class="col-md-2"> 
         <select class="form-control" id="sel1"> 
          <option>Toutes categories</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
         </select> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="button-and-input"> 
    <div class="row"> 
     <div class="consulter-form col-sm-6 col-md-6 col-lg-6"> 
      <h2>Trouver une entreprise</h2> 
     </div> 
    </div> 
</div> 

Answer 1

我覺得你的代碼不正確。

試着這麼做：

• 考慮提供一個小提琴代碼：

  <div class="home-top-selects container-fluid"> 
      <div class="row"> 
       <div class="consulter-form col-sm-6"> 
        <h2>Consulter les petites annonces</h2> 
        <form> 
         <div class="row"> 
          <div class="col-sm-8"> 
           <h4>Par mot-cle les petites annonces</h4> 
          </div> 
         </div> 
  
         <div class="row"> 
          <div class="col-sm-8"> 
           <input type="text" class="form-control" id="usr" /> 
          </div> 
          <div class="col-sm-4"> 
           <select class="form-control" id="sel1"> 
            <option>Toutes categories</option> 
            <option>2</option> 
            <option>3</option> 
            <option>4</option> 
           </select> 
          </div> 
         </div> 
  
         <div class="row"> 
          <div class="col-sm-3"> 
           <h4>Oú?</h4> 
          </div> 
         </div> 
  
         <div class="row"> 
          <div class="col-sm-3"> 
           <select class="form-control" id="select-flags"> 
            <option>France</option> 
            <option>Spain</option> 
            <option>Brazil</option> 
           </select> 
          </div> 
          <div class="col-sm-5"> 
           <select class="form-control" id="another-select"> 
            <option>toutes les villes select</option> 
           </select> 
          </div> 
          <div class="col-sm-4 text-right"> 
           <button class="btn btn-primary btn-block" type="submit"> 
            Lancez Votre Recherche 
           </button> 
          </div> 
         </div> 
  
         <h5 class="text-info text-center"> 
          Faite une recherche dans votre périmètre grâce à votre géolocalisation. 
         </h4> 
        </form> 
       </div> 
  
       <div class="col-sm-6"> 
        <h2>Trouver Une Enterprise</h2> 
        <form> 
         <div class="row"> 
          <div class="col-sm-6"> 
           <h4>Par mot-clé ou nom d'enterprise</h4> 
          </div> 
  
          <div class="col-sm-3"> 
           <h4>Oú?</h4> 
          </div> 
         </div> 
  
         <div class="row"> 
          <div class="col-sm-6"> 
           <input type="text" class="form-control" id="usr-2" /> 
          </div> 
  
          <div class="col-sm-3"> 
           <select class="form-control" id="another-select-2"> 
            <option>toutes les villes select</option> 
           </select> 
          </div> 
  
          <div class="col-sm-3"> 
           <select class="form-control" id="select-flags-2"> 
            <option>France</option> 
            <option>Spain</option> 
            <option>Brazil</option> 
           </select> 
          </div> 
         </div> 
  
         <!-- Place this to fill the blank space --> 
         <div class="row"> 
          <div class="col-sm-12"> 
           <h4>&#160;</h4> 
          </div> 
         </div> 
  
         <div class="row"> 
          <div class="col-sm-6"> 
           <select class="form-control" id="different-select"> 
            <option>Autres options de recherche</option> 
           </select> 
          </div> 
  
          <div class="col-sm-offset-3 col-sm-3"> 
           <button class="btn btn-primary btn-block" type="submit"> 
            Chercher 
           </button> 
          </div> 
         </div> 
  
         <hr/> 
  
         <div class="text-center"> 
          <h2 class="text-info"> 
           Votre enterprise n'est pas référencée? 
          </h2> 
          <button class="btn btn-large btn-default"> 
           <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> AJOUTER MON ENTERPRISE 
          </button> 
         </div> 
        </form> 
       </div> 
      </div> 
  </div> 
  

  的一些註釋。小提琴：https://jsfiddle.net/ricardovigatti/wo11dtvs/

• col-sm- *用於小視口，但中型和大型視口可以理解並使用它。
• 您不提供任何表格標籤。您將需要中的兩個。
• 我沒有測試我的代碼，如果您決定使用，我們可以改進它。
• 你是在正確的道路，但要記住，自己試圖永遠是最好的學習...