Analise a imagem abaixo;
Você percebe que o campo número está cortado porque o formulário modal precisa de uma largura maior, eu fiz essas tentativas abaixo, porém sem sucesso.
Essa é minha pagina;
<form>
<div class="modal fade" id="create">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>&time;</span>
</button>
<h4>Novo Imóvel</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="descricao">Descrição</label>
<input type="text" class="form-control" placeholder="Descrição" name="descricao" required>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="preco">Preço</label>
<input type="text" class="form-control" placeholder="Preço" name="preco" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="qtdQuartos">Quantidade de Quartos</label>
<input type="number" class="form-control" placeholder="Quantidade de Quartos" required name="qtdQuartos">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="tipo">Tipo do imóvel</label>
<select class="form-control" name="tipo" required>
<option>Apartamento</option>
<option>Casa</option>
<option>Kitnet</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="qtdQuartos">Finalidade do imóvel</label>
<select class="form-control" name="finalidade" required>
<option>Venda</option>
<option>Locação</option>
</select>
</div>
</div>
</div>
<h4>Endereço</h4>
<hr>
<div class="form-group">
<label for="logradouroEndereco">Logradouro</label>
<input type="text" class="form-control" placeholder="Logradouro" required name="logradouroEndereco">
</div>
<div class="row">
<div class="col-md-10">
<div class="form-group">
<label for="bairroEndereco">Bairro</label>
<input type="text" class="form-control" placeholder="Bairro" required name="bairroEndereco">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="numero">Número</label>
<input type="number" class="form-control" placeholder="Número" required name="numeroEndereco">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Salvar">
</div>
</div>
</div>
</div>
</form>
OBS: Não se preocupem, pois eu tenho certeza que a pagina está conectada com os dois arquivos de css
Como as outra tag são classes, eu tentei fazer dessa forma no arquivo ccs.
tentativa número um.
.modal-content{
width: 500px;
}
tentativa numero dois
.modal-dialog{
width: 500px;
}
tentativa numero três
.modal-header{
width: 500px;
}
tentativa numero quatro:
.modal-body{
width: 500px;
}
ficou assim, mas não resolveu.
Alguém tem alguma sugestão?