Fit the inline bootstrap form inside the rotating banner and adjust the fields

Question

Fit the inline bootstrap form inside the rotating banner and adjust the fields

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have a form that I tried to put in the middle of a rotating banner, but it looked like this:

HowwouldIdotocenterinthemiddleofthebannerandthefieldsgetmoreharmonicwithinthediv?

<formclass="form-inline" style="padding: 10px; width: 870px; background: rgba(0,0,0,.4);  margin: 150px 10%; position: absolute; z-index: 9999999999">
    <div align="center"><h1 style="color: #FFF; padding: 10px">Sua casa nova está aqui!</h1></div>

               <div class="form-group col-lg-3">
                   <select method="post" class="form-control" style="width: 100%">
                     <option>O que deseja?</option>
                     <option>Alugar</option>
                     <option>Lançamentos</option>                                          
                 </select>
               </div>                                    
               <div class="form-group col-lg-3">
                 <select method="post" class="form-control" style="width: 100%">
                     <option>Qual tipo?</option>
                     <option value="Todos" style="background-color: #F5F5F5; font-weight: bold">Todos</option>
                     <option value="Todos">  - Todos os imóveis</option>
                     <option value="Todos" style="background-color: #F5F5F5; font-weight: bold">  Residencial</option>
                     <option value="Todos">  - Apartamento padrão</option>
                     <option value="Todos">  - Casa de condomínio</option>
                     <option value="Todos">  - Casa de vila</option>
                     <option value="Todos">  - Casa padrão</option>
                     <option value="Todos">  - Cobertura</option>                                                             
                 </select>
               </div>
               <div class="form-group col-lg-3">
                 <select method="post" class="form-control" style="width: 100%">
                     <option>Localização</option>
                     <option>Botafogo</option>
                     <option>Ipanema</option>
                     <option>Copacabana</option>                                          
                 </select>
               </div>
      <div class="form-group col-lg-3">
          <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>  Buscar</button>
      </div>
</form>

css

asked by anonymous 02.08.2017 / 22:55

2 answers

1

So it becomes more presentable and harmonic:

Instead of setting a fixed width for <form> pq this will break the Bootstrap function in responsive layouts (when the screen is less than the set value), just omit width and center with transform , keeping the left in 50%:

-webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0);

It would look like this:

<form class="form-inline" style="padding: 10px; text-align: center; background: rgba(0,0,0,.4);  margin-top: 150px;position: absolute; z-index: 9999999999;-webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 50%;">

Since H1 , not to leave much space on the main text, you put:

padding:0 0 20px 0; margin: 0;

Looking like this:

<h1 style="color: #FFF;padding:0 0 20px 0; margin: 0px;">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><scriptsrc="http://cinebsb.tempsite.ws/scripts/jquery-1.11.0.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><formclass="form-inline" style="padding: 10px; text-align: center; background: rgba(0,0,0,.4);  margin-top: 150px;position: absolute; z-index: 9999999999;-webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 50%;">
    <div><h1 style="color: #FFF;padding:0 0 20px 0; margin: 0px;">Sua casa nova está aqui!</h1></div>

               <div class="form-group col-lg-3">
                   <select method="post" class="form-control" style="width: 100%">
                     <option>O que deseja?</option>
                     <option>Alugar</option>
                     <option>Lançamentos</option>                                          
                 </select>
               </div>                                    
               <div class="form-group col-lg-3">
                 <select method="post" class="form-control" style="width: 100%">
                     <option>Qual tipo?</option>
                     <option value="Todos" style="background-color: #F5F5F5; font-weight: bold">Todos</option>
                     <option value="Todos">  - Todos os imóveis</option>
                     <option value="Todos" style="background-color: #F5F5F5; font-weight: bold">  Residencial</option>
                     <option value="Todos">  - Apartamento padrão</option>
                     <option value="Todos">  - Casa de condomínio</option>
                     <option value="Todos">  - Casa de vila</option>
                     <option value="Todos">  - Casa padrão</option>
                     <option value="Todos">  - Cobertura</option>                                                             
                 </select>
               </div>
               <div class="form-group col-lg-3">
                 <select method="post" class="form-control" style="width: 100%">
                     <option>Localização</option>
                     <option>Botafogo</option>
                     <option>Ipanema</option>
                     <option>Copacabana</option>                                          
                 </select>
               </div>
      <div class="form-group col-lg-3">
          <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>  Buscar</button>
      </div>
</form>

03.08.2017 / 00:50

Problem after updating Moodle 2.9 to 3.3.1 - Theme not designed for Moodle version PHP + Javascript countdown

score 1 · Accepted Answer

Since <form> is in absolute positioning, you can not center with margin: 150px auto . Instead you can apply left:50% and then pull to the left in half the element size with margin-left: -435px; .

So:

<form class="form-inline" style="padding: 10px; width: 870px; background: rgba(0,0,0,.4);  margin-top: 150px;margin-left:-435px;left:50%; position: absolute; z-index: 9999999999">

Or trying to visualize more clearly:

padding: 10px; 
width: 870px; 
background: rgba(0,0,0,.4);  
margin-top: 150px; /*alterado*/
margin-left:-435px; /*novo*/
left:50%; /*novo*/
position: absolute; 
z-index: 9999999999;

Notice that I also changed the margin that was to be only margin-top . As for the spacing of elements just apply margin and padding needed to be more or less spaced between them until you match your taste.