Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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 CostaSomente 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>
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".
>
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.
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.
Campo cidade
Campo bairro