2016-12-12 3 views
0

Ich mag würde meine Form in diesem Stil als Bildreferenz ich versuchte zu machen, aber ich Erfolg enter image description hereBootstrap Stil Form Inline

Ich hatte wie folgenden Code die Struktur nicht bekommen ... wenn jemand irgendwelche haben wird Andere Code-Referenz zu teilen wird auch gut sein.

dank

Link demo

<div class="row"> 
      <div class="col col-sm-12"> 
       <div class="container"><br/> 
        <form class="form form-inline form-multiline" role="form"> 
         <div class="form-group"> 
          <div class="input-group"> 
           <input type="text" class="form-control" placeholder="Pesquisar" aria-describedby="basic-addon2"> 
           <span class="input-group-addon" id="basic-addon2"><i class="glyphicon glyphicon-search"></i></span> 
          </div> 
         </div> 
         <div class="form-group"> 
          <input type="button" class="btn btn-default" value="Filtros"> 
         </div> 
         <div class="col col-sm-12"> 
          <div class="col col-sm-4"> 
           <ul> 
            <h4>Situação</h4> 
            <li>Útumos incluídos</li> 
            <li>Todos</li> 
            <li>Ativos</li> 
            <li>Excluídos</li> 
            <li>Inativos</li> 
           </ul> 
          </div> 
          <div class="col col-sm-4"> 
           <ul> 
            <h4>Tipo de cadastro</h4> 
            <li>Cliente</li> 
            <li>Fornecedor</li> 
            <li>Transportador</li> 
            <li>Vendedor</li> 
            <li>Sem tipo definido</li> 
           </ul> 
          </div> 
          <div class="col col-sm-4"> 
           <h4>Outras opções de pesquisa</h4> 
           <div class="form-group"> 
             <label>Vendedor</label> 
             <input type="text" class="form-control"> 
           </div> 
           <div class="form-group"> 
             <div class="row"> 
              <div class="col-md-6"> 
              <label>Município</label> 
               <input type="text" class="form-control"> 
              </div> 
              <div class="col-md-6"> 
               <label>Estado</label><br/> 
               <select name="" id=""> 
                <option value=""></option> 
               </select> 
              </div> 
             </div> 
           </div> 
           <div class="form-group"> 
             <label>Telefone/Celular</label> 
             <input type="text" class="form-control"> 
           </div> 
           <div class="form-group"> 
             <label>Prox. Visita</lebel> 
             <div class="row"> 
              <div class="col-md-6"> 
               <label>De:</label> 
               <div class='input-group date' id='datetimepicker1'> 
                <input type='text' class="form-control" /> 
                <span class="input-group-addon"> 
                 <span class="glyphicon glyphicon-calendar"></span> 
                </span> 
               </div> 
              </div> 
              <div class="col-md-6"> 
               <label>Até:</label> 
               <div class='input-group date' id='datetimepicker1'> 
                <input type='text' class="form-control" /> 
                <span class="input-group-addon"> 
                 <span class="glyphicon glyphicon-calendar"></span> 
                </span> 
               </div> 
              </div> 
             </div> 
           </div> 
           <div class="form-group"> 
             <label>Sem compras no período:</lebel> 
             <div class="row"> 
              <div class="col-md-6"> 
               <label>De:</label> 
               <div class='input-group date' id='datetimepicker1'> 
                <input type='text' class="form-control" /> 
                <span class="input-group-addon"> 
                 <span class="glyphicon glyphicon-calendar"></span> 
                </span> 
               </div> 
              </div> 
              <div class="col-md-6"> 
               <label>Até:</label> 
               <div class='input-group date' id='datetimepicker1'> 
                <input type='text' class="form-control" /> 
                <span class="input-group-addon"> 
                 <span class="glyphicon glyphicon-calendar"></span> 
                </span> 
               </div> 
              </div> 
             </div> 
           </div> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 

Antwort

0

Verwenden Sie die Kombination aus Bootstrap Grid, col-*-*, und verwenden Sie es mit Ihren .form-group Klassen.

Werfen Sie einen Blick auf das Snippet unten (Verwendung Vollbildmodus) oder schauen Sie auf der aktualisierten Demo.

label { 
 
    display: block; 
 
} 
 

 
.form-group { 
 
    margin-bottom: 10px !important; 
 
} 
 

 
.form-control { 
 
    width: 100% !important; 
 
} 
 

 
.input-group { 
 
    width: 100%; 
 
} 
 

 
.form-holder { 
 
    margin: 0 -15px; 
 
} 
 

 
.form-holder h4 { 
 
    padding: 0 15px; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    margin-bottom: 0; 
 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
\t <div class="col col-sm-12"> 
 
\t \t <div class="container"><br> 
 
\t \t \t <form class="form form-inline form-multiline" role="form"> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t \t <input type="text" class="form-control" placeholder="Pesquisar" aria-describedby="basic-addon2"> 
 
\t \t \t \t \t \t <span class="input-group-addon" id="basic-addon2"><i class="glyphicon glyphicon-search"></i></span> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <input type="button" class="btn btn-default" value="Filtros"> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col col-sm-12"> 
 
\t \t \t \t \t <div class="col col-sm-4"> 
 
\t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t <h4>Situação</h4> 
 
\t \t \t \t \t \t \t <li>Útumos incluídos</li> 
 
\t \t \t \t \t \t \t <li>Todos</li> 
 
\t \t \t \t \t \t \t <li>Ativos</li> 
 
\t \t \t \t \t \t \t <li>Excluídos</li> 
 
\t \t \t \t \t \t \t <li>Inativos</li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col col-sm-4"> 
 
\t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t <h4>Tipo de cadastro</h4> 
 
\t \t \t \t \t \t \t <li>Cliente</li> 
 
\t \t \t \t \t \t \t <li>Fornecedor</li> 
 
\t \t \t \t \t \t \t <li>Transportador</li> 
 
\t \t \t \t \t \t \t <li>Vendedor</li> 
 
\t \t \t \t \t \t \t <li>Sem tipo definido</li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col col-sm-4"> 
 
\t \t \t \t \t \t <h4>Outras opções de pesquisa</h4> 
 
\t \t \t \t \t \t <div class="form-holder"> 
 
\t \t \t \t \t \t \t <div class="form-group col-sm-12"> 
 
\t \t \t \t \t \t \t \t <label>Vendedor</label> 
 
\t \t \t \t \t \t \t \t <input type="text" class="form-control"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="form-group col-sm-8"> 
 
\t \t \t \t \t \t \t \t <label>Município</label> 
 
\t \t \t \t \t \t \t \t <input type="text" class="form-control"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="form-group col-sm-4"> 
 
\t \t \t \t \t \t \t \t <label>Estado</label> 
 
\t \t \t \t \t \t \t \t <select name="" id="" class="form-control"> 
 
\t \t \t \t \t \t \t \t \t <option value="">Select</option> 
 
\t \t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="form-group col-sm-12"> 
 
\t \t \t \t \t \t \t \t <label>Telefone/Celular</label> 
 
\t \t \t \t \t \t \t \t <input type="text" class="form-control"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <h4>Prox. Visita</h4> 
 
\t \t \t \t \t \t \t <div class="form-group col-sm-6"> 
 
\t \t \t \t \t \t \t \t <label>De:</label> 
 
\t \t \t \t \t \t \t \t <div class="input-group date" id="datetimepicker1"> 
 
\t \t \t \t \t \t \t \t \t <input type="text" class="form-control"> 
 
\t \t \t \t \t \t \t \t \t <span class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t \t \t <span class="glyphicon glyphicon-calendar"></span> 
 
\t \t \t \t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="form-group col-sm-6"> 
 
\t \t \t \t \t \t \t \t <label>Até:</label> 
 
\t \t \t \t \t \t \t \t <div class="input-group date" id="datetimepicker1"> 
 
\t \t \t \t \t \t \t \t \t <input type="text" class="form-control"> 
 
\t \t \t \t \t \t \t \t \t <span class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t \t \t <span class="glyphicon glyphicon-calendar"></span> 
 
\t \t \t \t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <h4>Sem compras no período</h4> 
 
\t \t \t \t \t \t \t <div class="form-group col-sm-6"> 
 
\t \t \t \t \t \t \t <label>De:</label> 
 
\t \t \t \t \t \t \t \t <div class="input-group date" id="datetimepicker1"> 
 
\t \t \t \t \t \t \t \t \t <input type="text" class="form-control"> 
 
\t \t \t \t \t \t \t \t \t <span class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t \t \t <span class="glyphicon glyphicon-calendar"></span> 
 
\t \t \t \t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="form-group col-sm-6"> 
 
\t \t \t \t \t \t \t \t <label>Até:</label> 
 
\t \t \t \t \t \t \t \t <div class="input-group date" id="datetimepicker1"> 
 
\t \t \t \t \t \t \t \t \t <input type="text" class="form-control"> 
 
\t \t \t \t \t \t \t \t \t <span class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t \t \t <span class="glyphicon glyphicon-calendar"></span> 
 
\t \t \t \t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </form> 
 
\t \t </div> 
 
\t </div> 
 
</div>

hoffe, das hilft!

+0

meine Antwort Hoffnung @MinaMagdy half Ihnen aus, wenn ja upvote & akzeptieren nicht vergessen. Einen schönen Tag noch. –

0

verwendet:

[class*='col-sm-']:not(:last-child):after