input Centralizar input

[allyssondwk 0]

Boa dia,

 

Eu comecei recentemente trabalhar com bootstrap e estou com uma dificuldade. Abaixo vou demonstrar meu código e explico a situação:

 

  <div class="capa">
      <div class="texto-capa">
        <div class="container">
          <div class="row">
            <h1>AVRESER</h1>
            <h3>Muito mais que uma reserva</h3>
          </div>

          <div class="row caixa">

            <div class="col-md-2">
              t
            </div>

            <div class="col-md-8 form-group ">
              <div class="row caixa-pesquisa">

                <form method="post" action="cidade.php">

                  <div class="col-md-1" style="border: 1px solid red;">
                    <span class="glyphicon glyphicon-search icon-pesquisa"></span>
                  </div>

                  <div class="col-md-9" style="border: 1px solid red;">
                    <div class="form-group caixa-pesquisa-div">
                      <input type="text" name="" class="form-control caixa-pesquisa-input">
                    </div>
                  </div>

                  <div class="col-md-2 form-group" style="border: 1px solid red;">
                    <button class="btn btn-success" type="button">Search</button>
                  </div>

                </form>

              </div>  
            </div>
            

            <div class="col-md-2">
              t
            </div>

          </div>
        </div>
      </div>
    </div><!-- Capa -->

 

Minha primeira dúvida é a seguinte, eu posso criar Grids dentro de outras ? Igual e fiz na "row caixa" criei um layout md-2 md-8 md-2 e dentro do md-8 criei uma nova grid?

E a dúvida principal, na row dentro da classe caixa-pesquisa eu criei um css:

.caixa-pesquisa {
    background: white;
    height: 50px;
    border-radius: 2px;
}

E gostaria de deixar o input ou centralizado, ou 100% em referencia à caixa-pesquisa.

 

Espero ter deixado claro minhas dúvidas, é a primeira vez que participo do fórum.

 

Atenciosamente.

[RodrigoCorrea 6]

Com relação a colocar o input centralizado você pode fazer assim:

.caixa-pesquisa input[type=text]{  
	width: TAMANHO_ESCOLHIDO; 
    float: center;
	margin: 0px auto;
}

Caso queira colocar com 100% do tamanho, faça assim:

.caixa-pesquisa input[type=text]{  
	width: 100%;
}

Espero ter ajudado

[Maykel-ctba 233]

Minha primeira dúvida é a seguinte, eu posso criar Grids dentro de outras ?

Sim, pode.

 

Input centralizado

Ao invés de usar códigos no seu CSS, tente a solução do próprio Bootstrap.

<div class="form-group caixa-pesquisa-div text-center">
	<input type="text" name="" class="form-control caixa-pesquisa-input">
</div>

 

[allyssondwk 0]

Muito obrigado pelas dicas, deu certo !