1
<div class="container">
  <h2>Button Tags</h2>


  <form>
  <div class="form-group col-sm-3">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group col-sm-3">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>


</div>

Forma como aparece:

inserir a descrição da imagem aqui

Eu quero o botão na mesma linha dos inputs.

2 Respostas 2

2

Tenta assim:

.btn-enviar {
  margin-top: 9.5%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h2>Button Tags</h2>


  <form>
  <div class="row">
    <div class="col-sm-3 form-group">
      <label for="exampleInputName2">Name</label>
      <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 form-group">
      <label for="exampleInputEmail2">Email</label>
      <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
    </div>
    <div class="col-sm-3">
      <button type="submit" class="btn btn-default btn-enviar">Send invitation</button>
    </div>
  </div>
</form>


</div>

Expande o trecho de código

1
  • Eu só não adicionaria o margin em uma classe default, pois pode implicar na usabilidade em outras páginas. sugiro que crie uma outra classe para o margin-top Commented 1/06/2017 às 17:57
2

Recomendo que dê uma lida no Bootstrap grid system caso vá usar bootstrap.

Para alinhar seu botão abaixo (presumi que era abaixo que você queria, baseado no trecho de código que você deu), simplesmente adicionei a classe form-control no botão, e coloquei dentro de uma div com a classe col-md-12.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <h2>Button Tags</h2>

<form class="form-inline">
<div class="form-group">
    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon"><label       for="exampleInputName2">Name</label></span>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
            
            <span class="input-group-addon">
            <label for="exampleInputEmail2">Email</label>
            </span>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
            
            <span class="input-group-btn">
        <button class="btn btn-default" type="button">Send invitation</button>
   </span>
            
        </div>
    </div>
</div>
</form>



</div>

4
  • da uma olhada no meu edit Commented 1/06/2017 às 14:13
  • @CalebeMachado vê se o meu edit é o que você queria Commented 1/06/2017 às 14:42
  • O ideal mesmo é da forma como mostro na imagem e o botão alinha aos inputs, vou aplicar esse form em um cadastro gigantesco de um erp. Commented 2/06/2017 às 15:53
  • @CalebeMachado Não te entendi. Eu coloquei na vertical, você disse pra mudar pra horizontal, igual tá na imagem, foi o que eu fiz, aí você aceitou a resposta do cara que fez o que eu tinha feito, mas tudo bem Commented 2/06/2017 às 19:04

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 .