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- *用于小视口，但中型和大型视口可以理解并使用它。
• 您不提供任何表格标签。您将需要中的两个。
• 我没有测试我的代码，如果您决定使用，我们可以改进它。
• 你是在正确的道路，但要记住，自己试图永远是最好的学习...