7

Sou novato ainda em desenvolvimento web e estou com um dúvida no meu formulário em colocar as duas linhas do formulário uma ao lado da outra no Bootstrap responsivo, sabendo que cada input irá trazer informações separadamente.

Exemplo:

Nome: ________________    Sobrenome: ______________

.group{ 
	position:relative; 
	margin-bottom:20px; 
  }
  .group input 				{
	font-size:18px;
	padding:7px 7px 5px 2px;
	display:block;
	width:80%;
	border:none;
	border-bottom:1px solid #B3AFAF;
  }
  .group input:focus 		{ outline:none; }
  
  /* LABEL ======================================= */
  .group label 				 {
	color:#fff; 
	font-size:18px;
	font-weight:normal;
	position:absolute;
	pointer-events:none;
	left:5px;
	top:10px;
	transition:0.2s ease all; 
	-moz-transition:0.2s ease all; 
	-webkit-transition:0.2s ease all;
  }
  
  /* active state */
  .group input:focus ~ label, input:valid ~ label 		{
	top:-15px;
	font-size:14px;
	color:#5264AE;
  }
  
  /* BOTTOM BARS ================================= */
  .group .bar 	{ position:relative; display:block; width:300px; }
  .group .bar:before, .bar:after 	{
	content:'';
	height:2px; 
	width:0;
	bottom:1px; 
	position:absolute;
	background:#5264AE; 
	transition:0.2s ease all; 
	-moz-transition:0.2s ease all; 
	-webkit-transition:0.2s ease all;
  }
  .group .bar:before {
	left:50%;
  }
  .group .bar:after {
	right:50%; 
  }
  
  /* active state */
  .group input:focus ~ .bar:before, input:focus ~ .bar:after {
	width:50%;
  }
  
  /* HIGHLIGHTER ================================== */
  .group .highlight {
	position:absolute;
	height:60%; 
	width:100px; 
	top:25%; 
	left:0;
	pointer-events:none;
	opacity:0.5;
  }
  
  /* active state */
  .group input:focus ~ .highlight {
	-webkit-animation:inputHighlighter 0.3s ease;
	-moz-animation:inputHighlighter 0.3s ease;
	animation:inputHighlighter 0.3s ease;
  }
  
  /* ANIMATIONS ================ */
  @-webkit-keyframes inputHighlighter {
	  from { background:#5264AE; }
	to 	{ width:0; background:transparent; }
  }
  @-moz-keyframes inputHighlighter {
	  from { background:#5264AE; }
	to 	{ width:0; background:transparent; }
  }
  @keyframes inputHighlighter {
	  from { background:#5264AE; }
	to 	{ width:0; background:transparent; }
  }
<div class="group">
												<input type="number" name="Phone" required="required"style="background-color:transparent"onkeydown="limit(this, 11);" onkeyup="limit(this,11);">
                                                <span class="highlight"></span>
                                                <span class="bar"></span><label>Usuario</label>
											</div>
											
											<div class="group">
												<input type="password" name="password" required="required"><input type="hidden" name="senh" value="Trainer"style="background-color:transparent"onkeydown="limit(this, 4);" onkeyup="limit(this,4);">
                                                <span class="highlight"></span>
                                                <span class="bar"></span><label>Senha</label>

5
  • você pode postar todo o código. Commented 6/11/2017 às 15:35
  • Meu caro, dê uma olhada nesta resposta, acho que ela te ajudará:pt.stackoverflow.com/questions/235749/… Commented 6/11/2017 às 15:35
  • sim alexandre o exemplo que voce me deu esta certo porem o restante do formulario ficara centralizado logo abaixo. preciso de algo que o nome e sobre nome fique um ao lado do outro e o restante centralizado abaixo. Commented 6/11/2017 às 15:40
  • minha div estao formatados no css3. kkk existe alguma class que eu possa inserir que separe isso ? Commented 6/11/2017 às 15:41
  • Olá Thalis Alison, seja bem vindo ao SOpt! Parece que seu código está incompleto. Editei sua pergunta, mas você pode melhorá-la clicando aqui. Como você é novato, sugiro ver como fazer uma boa pergunta ou se ainda tiver dúvidas de como funciona o site, você pode fazer um pequeno tour por aqui.
    – bio
    Commented 6/11/2017 às 17:25

3 Respostas 3

4

Se você estiver utilizando Bootstrap 4, basta definir na div a classe .form-row em vez de .row, obtendo dessa forma layouts mais compactos.
Veja mais em: https://getbootstrap.com/docs/4.0/components/forms/?#form-row

Exemplo:

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Outra forma é utilizar um sistema de Grid, utilizando colunas. Criando uma div de classe .row e depois divs filhas com a classe .col-sm-##, sendo col- padrão, você deve optar por sm/md/lg/xl, para definir o momento que as colunas vão se deslocar para baixo da outra (recurso responsivo), e depois escolher a proporção da coluna, 1 a 12 de 12.

Por exemplo .col-md-6, para duas colunas (divs) do mesmo tamanho na proporção de 6 e 6 de 12, e outro exemplo, 3 colunas (divs) com a classe .col-lg-4, para 3 colunas de mesmo tamanho. Lembrando que, o sistema de Grid utiliza 12 como o tamanho base para definição das proporções das colunas.

Exemplo:

<div class="row">
  <div class="col-sm-6">seu objeto aqui</div>
  <div class="col-sm-6">seu objeto aqui</div>
</div>

É muito importante ler a documentação do Framework Bootstrap.
Veja mais em: https://getbootstrap.com/docs/4.0/layout/grid/

0

Creio que esteja querendo colocar seus labels ao lado um do outro, portanto ai vai, se não for isso, comente que eu edito a resposta

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title></title> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Início do sript JQuery JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Fim do script JQuery JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>    

</head>

<div class="row">
    <div class="col-lg-12"><!-- Conteiner Geral -->     

        <div class="panel panel-default"><!-- Inicio Panel Geral -->
            <div class="panel-body"><!-- Corpo Panel  -->

                <!-- Inicio do formulario -->
                <form method="POST" action="">
                    <br>
                    <div class="col-lg-12">
                        <div class="col-lg-4"><!-- Inicio Input Código -->
                            <label for="ex1">Codigo: </label>
                            <input  type="text" class="form-control" id="" name="" size="60"><br>
                        </div><!-- FimInput Código -->
                    </div>

                    <div class="col-lg-12">
                        <div class="col-lg-4"><!-- Inicio Input Usuário -->
                            <label for="ex1">Usuário: </label>
                            <input  type="text"  class="form-control" id="" name="" size="40"><br>
                        </div><!-- Fim Input Usuário -->

                        <div class="col-lg-8"><!-- Inicio Input Senha Antiga -->
                            <label for="ex1">Senha Aniga: </label>
                            <input  type="text"  class="form-control" id="" name="" size="40"><br>
                        </div><!-- Fim Input Senha Antiga -->
                    </div>
            </div>  
        </div>
    </div>
</div>

Resultando nisso, veja a imagem abaixo.

inserir a descrição da imagem aqui

2
  • vou coloca- los e confirmo com aqui Commented 6/11/2017 às 18:04
  • entao victor nao foi estou usando css nas classe qualquer mudança que faço ele nao executa o css nao funciona e meu formulário fica sem animação sem inserir dados vou postar meu css o sr da uma olhada Commented 6/11/2017 às 18:10
0

.group{ 
	position:relative; 
	margin-bottom:20px; 
  }
  .group input 				{
	font-size:18px;
	padding:7px 7px 5px 2px;
	display:block;
	width:80%;
	border:none;
	border-bottom:1px solid #B3AFAF;
  }
  .group input:focus 		{ outline:none; }
  
  /* LABEL ======================================= */
  .group label 				 {
	color:#fff; 
	font-size:18px;
	font-weight:normal;
	position:absolute;
	pointer-events:none;
	left:5px;
	top:10px;
	transition:0.2s ease all; 
	-moz-transition:0.2s ease all; 
	-webkit-transition:0.2s ease all;
  }
  
  /* active state */
  .group input:focus ~ label, input:valid ~ label 		{
	top:-15px;
	font-size:14px;
	color:#5264AE;
  }
  
  /* BOTTOM BARS ================================= */
  .group .bar 	{ position:relative; display:block; width:300px; }
  .group .bar:before, .bar:after 	{
	content:'';
	height:2px; 
	width:0;
	bottom:1px; 
	position:absolute;
	background:#5264AE; 
	transition:0.2s ease all; 
	-moz-transition:0.2s ease all; 
	-webkit-transition:0.2s ease all;
  }
  .group .bar:before {
	left:50%;
  }
  .group .bar:after {
	right:50%; 
  }
  
  /* active state */
  .group input:focus ~ .bar:before, input:focus ~ .bar:after {
	width:50%;
  }
  
  /* HIGHLIGHTER ================================== */
  .group .highlight {
	position:absolute;
	height:60%; 
	width:100px; 
	top:25%; 
	left:0;
	pointer-events:none;
	opacity:0.5;
  }
  
  /* active state */
  .group input:focus ~ .highlight {
	-webkit-animation:inputHighlighter 0.3s ease;
	-moz-animation:inputHighlighter 0.3s ease;
	animation:inputHighlighter 0.3s ease;
  }
  
  /* ANIMATIONS ================ */
  @-webkit-keyframes inputHighlighter {
	  from { background:#5264AE; }
	to 	{ width:0; background:transparent; }
  }
  @-moz-keyframes inputHighlighter {
	  from { background:#5264AE; }
	to 	{ width:0; background:transparent; }
  }
  @keyframes inputHighlighter {
	  from { background:#5264AE; }
	to 	{ width:0; background:transparent; }
  }
<div class="group">
												<input type="number" name="Phone" required="required"style="background-color:transparent"onkeydown="limit(this, 11);" onkeyup="limit(this,11);">
                                                <span class="highlight"></span>
                                                <span class="bar"></span><label>Usuario</label>
											</div>
											
											<div class="group">
												<input type="password" name="password" required="required"><input type="hidden" name="senh" value="Trainer"style="background-color:transparent"onkeydown="limit(this, 4);" onkeyup="limit(this,4);">
                                                <span class="highlight"></span>
                                                <span class="bar"></span><label>Senha</label>

2
  • esse e o código já esta funcionando onde consigo colocar essa classe para rodar no mobile? Commented 6/11/2017 às 18:18
  • sua resposta é claramente uma cópia da resposta do hugocsl com pequenas mudanças, você deveria sugerir uma edição na resposta dele e marca-la como correta. Não postar sua própria resposta.
    – Paz
    Commented 10/01/2018 às 14:09

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 .