2

estou tentando alinhar no centro essa barra de pesquisa porém o botão não fica ao lado. Se puderem me ajudar já agradeço desde já. inserir a descrição da imagem aqui

 <div class="row">


                <div id="custom-search-input">
                    <form  action="#" method="POST" autocomplete="on"  class="navbar-form navbar-">
                        <div class="input-group col-md-6 col-md-offset-3  ">
                            <input autofocus="text" type="text" name="pesquisa" class="  search-query form-control" placeholder="Search" />
                            <span class="input-group-btn col-md-4">
                                <button class="btn btn-success " type="submit">
                                    <span class=" glyphicon glyphicon-search"></span>
                                </button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>

1 Resposta 1

1

Vc colocou a class col-md-4 no botão, ai o grid quebra o elemento para linha de baixo, basta remover essa classe

Veja

    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />

    <div class="container">
    <div class="row">


        <div id="custom-search-input">
            <form  action="#" method="POST" autocomplete="on"  class="navbar-form navbar-">
                <div class="input-group col-md-6 col-md-offset-3  ">
                    <input autofocus="text" type="text" name="pesquisa" class="  search-query form-control" placeholder="Search" />
                    <span class="input-group-btn ">
                        <button class="btn btn-success " type="submit">
                            <span class=" glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </div>
</div>

2
  • Muito obrigada, deu certo :) Commented 16/11/2018 às 18:29
  • @ThaynaPinheiro que bom que resolver, se vc acha que o problema foi resolvido considere marcar a Resposta como Aceita assim ela não fica pendente no site como pergunta sem resposta aceita
    – hugocsl
    Commented 16/11/2018 às 18:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .