0

Como alinhar o radio button com o label, usando o Bootstrap 3.x? Tentei de várias maneiras, porém o "desalinhamento" permanece.

radio{
width:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-8 text-info">
	<h4>1. Comprometimento</h4>
</div>
	<div class="col-md-4 text-info">
		<h4>AVALIAÇÃO</h4>
	</div>
	<div class="col-md-8">
		<p>Conhece e cumpre as normas estabelecidas na empresa</p>
	</div>
	<div class="col-md-4">
		<label for="comprom_perg_a" class="radio-inline control-label"> 
    <input type="radio" class="form-control" name="comprom_perg_a" value="7"> 07 </label>
		<label for="comprom_perg_a" class="radio-inline control-label">
    <input type="radio" class="form-control"  name="comprom_perg_a" value="8"> 08 </label>
		<label for="comprom_perg_a" class="radio-inline"> 
    <input type="radio" class="form-control" name="comprom_perg_a" value="9"> 09 </label>
		<label for="comprom_perg_a" class="radio-inline"> 
    <input type="radio" class="form-control"  name="comprom_perg_a" value="10"> 10 </label>
	</div>

Obs: foi preciso colocar o style, porque o radio button estava exageradamente grande.

0

2 Respostas 2

3

Se com "desalinhamento" você quer dizer que os elementos não ficam na mesma linha que o label, então o que vc procura é a classe radio-inline do Bootstrap v. 3.3.x.

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.

Ou seja, quando você quiser que eles apareçam na mesma linha, deve aplicar essa classe. Mas entenda uma coisa: a classe controla o elemento radio que está dentro dela, assim, o estilo do input radio já está definido, e você não pode aplicar outra classe a ele (você está tentando aplicar form-control).

Se você for olhar o conteúdo de bootstrap.css vai ver isso:

.radio-inline input[type=radio]{
    position:absolute;
    margin-top:4px\9;
    margin-left:-20px
}

Sendo assim, use a classe principal radio-inline sem chamar form-control:

<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">
<div class="text-info"><h4>1. Comprometimento</h4></div>
	<div class="text-info"><h4>AVALIAÇÃO</h4></div>
	<p>Conhece e cumpre as normas estabelecidas na empresa</p>
  
<div class="col-md-4">
		<label for="comprom_perg_a" class="radio-inline control-label"> 
    <input type="radio" name="comprom_perg_a" value="7"> 07 </label>
		<label for="comprom_perg_a" class="radio-inline control-label">
    <input type="radio"  name="comprom_perg_a" value="8"> 08 </label>
		<label for="comprom_perg_a" class="radio-inline"> 
    <input type="radio" name="comprom_perg_a" value="9"> 09 </label>
		<label for="comprom_perg_a" class="radio-inline"> 
    <input type="radio"  name="comprom_perg_a" value="10"> 10 </label>
	</div>
  
  
</div>

1

Para editar qualquer coisa em bootstrap eu costumo criar um arquivo externo de css e declarar ele depois do bootstrap.min.css, ficaria algo tipo:

<head>
  <link rel="stylesheet" src="css/bootstrap.min.css">
  <link rel="stylesheet" src="css/style.css">
</head>

A partir daí é só editar em css as alterações.

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 .