[Resolvido] Como colocar um campo ao lado do outro?

Sandson · Março 5, 2017

Olá, pessoal!

Estou com um problema no meu arquivo, e eu queria a ajuda de vocês pra me ajudar com esse problema.

Estou criando um tipo de formulário pra um projeto de jovens da igreja e estou com problema de colocar um campo ao lado do outro... Acho que só vai ser possível com a visualização do código.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SIME - Sistema de Mapeamento Espiritual</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/estilo.css">
</head>

<body>
	<h1 align="center"><strong>MAPEAMENTO ESPIRITUAL</strong></h1>
	<p align="justify">Mapeamento espiritual é o processo de encontrar as verdadeiras causas relativas aos sintomas apresentados. O mapeamento é a estrada que liga os sintomas as verdadeiras causas. A interpretação correta dos sintomas através do mapeamento deve nos levar às verdadeiras causas de perseguições espirituais. Quando existe um sintoma evidente de perseguição espiritual ou maldição, certamente existe uma causa que o sustenta. Falhas nesse processo comprometem os resultados da libertação.
Um dos mais importantes aspectos da intercessão é o mapeamento espiritual. É fundamental o discernimento para pesquisar e rastrear a história pessoal, familiar (hereditária) e territorial, as feridas, os traumas, pecados repetitivos, valores invertidos que expressam a identidade do “principado local”, as alianças quebradas, as profecias e os legados demoníacos, crimes relevantes e derramamentos de sangue e etc.</p>

<div class="form-group col-md-6">
			<label for="nome" id="pergunta">Nome:</label>
			<input type="text" name="nome" id="nome" class="form-control nome">
</div>
<div class="form-group col-md-1">
		  <label for="idade">Idade:</label>
		  <input type="number" name="idade" id="idade" class="form-control" min="10">
</div>
<div class="form-group col-md-5">
  <label for="profissao">Profissão:</label>
			<input type="text" name="profissao" id="profissao" class="form-control nome">
		</div>
	
		<div class="form-group col-md-1">
		  <label>Sexo:</label>
			<br>
			<input type="radio" name="sexo" id="masculino">
			<label>Masculino</label>
			<input type="radio" name="sexo" id="feminino">
			<label>Feminino</label>
		</div>
		
		<div class="form-group col-md-2">
			<label>Escolaridade:</label>
			<br>
			<input type="radio" name="escolaridade" id="fi">
			<label>Fundamental Incompleto</label><br>
			<input type="radio" name="escolaridade" id="fc">
			<label>Fundamental Completo</label><br>
			<input type="radio" name="escolaridade" id="mi">
			<label>Ensino Médio Incompleto</label><br>
			<input type="radio" name="escolaridade" id="mc">
			<label>Ensino Médio Completo</label><br>
			<input type="radio" name="escolaridade" id="si">
			<label>Superior Incompleto</label><br>
			<input type="radio" name="escolaridade" id="sc">
			<label>Superior Completo</label><br>
			<input type="radio" name="escolaridade" id="se">
			<label>Sem Escolaridade</label>
		</div>
		
		<div class="form-group col-md-4">	
			<label for="endereco">Endereço:</label>
			<input type="text" name="endereco" id="endereco" class="form-control nome">
			<label for="bairro">Bairro:</label>
			<input type="text" name="bairro" id="bairro" class="form-control nome">
			<label for="cidade">Cidade:</label>
			<input type="text" name="cidade" id="cidade" class="form-control nome">
			<label for="idade">Contato:</label>
			<input type="tel" name="contato" id="contato" class="form-control nome">
		</div>
		
		<div class="form-group col-md-4">
			<label>Estado Civil:</label>
			<br>
			<input type="radio" name="estado-civil" id="solteiro">
			<label>Solteiro(a)</label><br>
			<input type="radio" name="estado-civil" id="casado">
			<label>Casado(a)</label><br>
			<input type="radio" name="estado-civil" id="divorciado">
			<label>Divorciado(a)</label><br>
			<input type="radio" name="estado-civil" id="separado">
			<label>Separado(a)</label><br>
			<input type="radio" name="estado-civil" id="viuvo">
			<label>viuvo(a)</label><br>
			<input type="radio" name="estado-civil" id="namorando">
			<label>Namorando</label>
			<br>
			<label>É casado legalmente?</label>
			<br>
			<input type="radio" name="casamento" id="casamento-sim">
			<label>Sim</label>
			<input type="radio" name="casamento" id="casamento-nao">
			<label>Não</label>

		</div>

		<div class="form-group col-md-2">
			<label>É casado legalmente?</label>
			<br>
			<input type="radio" name="casamento" id="casamento-sim">
			<label>Sim</label>
			<input type="radio" name="casamento" id="casamento-nao">
			<label>Não</label>
		</div>
		
		<div class="form-group col-md-3">	
			<label for="conversao">Qual o tempo de conversão?</label>
			<input type="text" name="conversao" id="conversao" class="form-control nome">
		</div>
		<div class="form-group">
		  <label>É batizado?</label>
			<br>
			<input type="radio" name="batismo" id="batismo-sim">
			<label>Sim</label>
			<input type="radio" name="batismo" id="batismo-nao">
			<label>Não</label>
		</div>

		<div>				
			<label for="igreja">Qual a igreja na qual pertence?</label>
			<input type="text" name="igreja" id="igreja" class="form-control nome">			
			<label for="atividades">Atividades ou Ministério que você desempenha na igreja:</label>
			<input type="text" name="atividades" id="atividades" class="form-control nome">
		</div>
		
				<div class="form-group">
			<label>Já recebeu ministração de Cura Interior e Libertação anteriormente?</label>
			<br>
			<input type="radio" name="cura" id="cura-sim">
			<label>Sim</label>
			<input type="radio" name="cura" id="cura-nao">
			<label>Não</label><br>
			<label for="atividades">Onde?</label>
			<input type="text" name="onde" id="onde" class="form-control nome">

	  </div>
	  
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

esse é o meu css por enquanto hehe...

.nome {
	text-transform: uppercase;
}
#pergunta {
	color: aqua;
}

Eu quero que bairro e cidade fiquem um ao lado do outro... Como que eu faço isso? Eu não consigo.

Eu uso bootstrap.

Ah, pessoal! Outra dúvida!

Meu css muda a cor no firefox, mas no chrome não ta funcionando, porquê?

Att,

Sandson Costa

Alaerte Gabriel · Março 6, 2017

Bom eu não estou vendo os campos cidade nem bairro. Mais já que você usa bootstrap isso facilita muita. Você vai utilizar o esquema de GRID, não é necessário muita coisa.

<div class="row">

<div class="col-sm-6">

Campo cidade

</div>

<div class="col-sm-6">

Campo bairro

</div>

</div>

Dessa forma, os dois campos ficarão ao lado do outro e tomarão toda a largura da container.

Pita · Março 6, 2017

Somente complementando a resposta, algumas coisas que você precisa entender:

No Bootstrap, quando você cria uma div com a classe "row", o conteúdo desta div será colocado lado a lado, lembrando que pode ter no máximo 12 colunas(vou falar disso mais abaixo).

As divs internas precisam ter a classe "col-md-X", onde o "X" é o número de colunas que esta div irá ocupar, por exemplo, col-md-6 irá ocupar 50% do espaço, então você pode ter outra div col-md-6, ou duas divs col-md-3, ou a combinação que você quiser, sempre lembrando que a soma tem que dar no máximo de 12 que é o limite que a linha permite.

Por exemplo

<div class="row">
<div class="col-md-6">Campo1</div>
<div class="col-md-6">Campo2</div>
</div>
<div class="row">
<div class="col-md-6">Campo1</div>
<div class="col-md-3">Campo2</div>
<div class="col-md-3">Campo3</div>
</div>
<div class="row">
<div class="col-md-2">Campo3</div>
<div class="col-md-5">Campo1</div>
<div class="col-md-5">Campo2</div>
</div>

Uma coisinha a mais, você pode utilizar col-sm-X, col-md-X, col-xl-X se você quiser uma formatação diferenciada para dispositivos de tela pequenas, médias ou grande

Alaerte Gabriel · Março 6, 2017

1 hora atrás, Pita disse:

No Bootstrap, quando você cria uma div com a classe "row", o conteúdo desta div será colocado lado a lado, lembrando que pode ter no máximo 12 colunas(vou falar disso mais abaixo).

div com class ROW significa que será criada 1 linha. Colunas são criadas à partir das calsses "col-*" para que fiquem ao lado da outra, dentro da lilnha "row".

Sandson · Março 14, 2017

Em 06/03/2017 at 09:03, Pita disse:
Somente complementando a resposta, algumas coisas que você precisa entender:

No Bootstrap, quando você cria uma div com a classe "row", o conteúdo desta div será colocado lado a lado, lembrando que pode ter no máximo 12 colunas(vou falar disso mais abaixo).

As divs internas precisam ter a classe "col-md-X", onde o "X" é o número de colunas que esta div irá ocupar, por exemplo, col-md-6 irá ocupar 50% do espaço, então você pode ter outra div col-md-6, ou duas divs col-md-3, ou a combinação que você quiser, sempre lembrando que a soma tem que dar no máximo de 12 que é o limite que a linha permite.

Por exemplo
<div class="row">
<div class="col-md-6">Campo1</div>
<div class="col-md-6">Campo2</div>
</div>
<div class="row">
<div class="col-md-6">Campo1</div>
<div class="col-md-3">Campo2</div>
<div class="col-md-3">Campo3</div>
</div>
<div class="row">
<div class="col-md-2">Campo3</div>
<div class="col-md-5">Campo1</div>
<div class="col-md-5">Campo2</div>
</div>
Uma coisinha a mais, você pode utilizar col-sm-X, col-md-X, col-xl-X se você quiser uma formatação diferenciada para dispositivos de tela pequenas, médias ou grande

V

Em 06/03/2017 at 00:14, Alaerte Gabriel disse:
Bom eu não estou vendo os campos cidade nem bairro. Mais já que você usa bootstrap isso facilita muita. Você vai utilizar o esquema de GRID, não é necessário muita coisa.
<div class="row">

<div class="col-sm-6">

Campo cidade

</div>

<div class="col-sm-6">

Campo bairro

</div>

</div>
Dessa forma, os dois campos ficarão ao lado do outro e tomarão toda a largura da container.

Vlw pelas dicas pessoal! Consegui e ajudou bastante... Eu reformulei o formulário completo.

Pita, no meu caso vai ser intranet, não vai ter necessidade de uso de dispositivos móveis... Somente pra desktop mesmo.

Entrar

Arquivado

[Resolvido] Como colocar um campo ao lado do outro?

Recommended Posts

Sandson 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alaerte Gabriel 662

Compartilhar este post

Link para o post

Compartilhar em outros sites

Pita 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alaerte Gabriel 662

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sandson 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

recuperando parametros simplexml_load_file

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante