Input em Bootstrap 4 não ocupa a largura toda
Stack Overflow em Português Asked by Guilherme Silva on November 19, 2020
<title>Calculadora de Juros compostos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />
<link rel="stylesheet" href="calculadoras.css">
<script>
<body>
<div class="container-fluid d-flex justify-content-center">
<form method="post" action="juros-compostos_v2.php">
<label for="basic-url">Investimento Inicial</label>
<div class="input-group mb-3 rounded-0">
<div class="input-group-prepend">
<span class="input-group-text rounded-0 bg-warning"><strong>R$</strong></span>
</div>
<input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0"
type="number" step="0.01" name="investimento_inicial" min="0.00" max="9999999999.00" required>
</div>
<label for="basic-url">Investimento Mensal</label>
<div class="input-group mb-3 rounded-0">
<div class="input-group-prepend">
<span class="input-group-text rounded-0 bg-warning"><strong>R$</strong></span>
</div>
<input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0"
type="number" step="0.01" name="investimento_mensal" min="0.00" max="9999999999.00" required>
</div>
<label for="basic-url">Por quanto tempo?</label>
<div class="input-group mb-3 rounded-0">
<div class="input-group-prepend">
<span class="input-group-text rounded-0 bg-warning"><i class="far fa-clock"></i></span>
</div>
<input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0"
type="number" name="meses" min="1" placeholder="Meses" required>
</div>
<label for="basic-url">Juros ao Mês</label>
<div class="input-group mb-3 rounded-0">
<input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0"
type="number" step="0.01" name="taxa_de_juros" min="0.01" max="9999999999.00" required>
<div class="input-group-prepend">
<span class="input-group-text rounded-0 bg-warning"><i class="fas fa-percent"></i></span>
</div>
</div>
<button type="submit" class="btn btn-warning">Calcular</button>
</form>
</div>
2 Answers
o seu form está limitando o tamanho, basta adicionar o style na tag form
style="widht: 100%
exemplo:
<form method="post" action="juros-compostos_v2.php" style="width: 100%">
Answered by Anderson on November 19, 2020
No seu <form> adicione a classe nativa do Bootstrap w-100 isso vai fazer o form ocupar toda a largura do container
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<style>
</style>
</head>
<body>
<div class="container-fluid d-flex justify-content-center">
<form class="w-100" method="post" action="juros-compostos_v2.php">
<label for="basic-url">Investimento Inicial</label>
<div class="input-group mb-3 rounded-0">
<div class="input-group-prepend">
<span class="input-group-text rounded-0 bg-warning"><strong>R$</strong></span>
</div>
<input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0" type="number" step="0.01" name="investimento_inicial" min="0.00" max="9999999999.00" required>
</div>
<label for="basic-url">Investimento Mensal</label>
<div class="input-group mb-3 rounded-0">
<div class="input-group-prepend">
<span class="input-group-text rounded-0 bg-warning"><strong>R$</strong></span>
</div>
<input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0" type="number" step="0.01" name="investimento_mensal" min="0.00" max="9999999999.00" required>
</div>
<label for="basic-url">Por quanto tempo?</label>
<div class="input-group mb-3 rounded-0">
<div class="input-group-prepend">
<span class="input-group-text rounded-0 bg-warning"><i class="far fa-clock"></i></span>
</div>
<input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0" type="number" name="meses" min="1" placeholder="Meses" required>
</div>
<label for="basic-url">Juros ao Mês</label>
<div class="input-group mb-3 rounded-0">
<input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0" type="number" step="0.01" name="taxa_de_juros" min="0.01" max="9999999999.00" required>
<div class="input-group-prepend">
<span class="input-group-text rounded-0 bg-warning"><i class="fas fa-percent"></i></span>
</div>
</div>
<button type="submit" class="btn btn-warning">Calcular</button>
</form>
</div>
</body>
</html>Answered by hugocsl on November 19, 2020
Add your own answers!
Ask a Question
Get help from others!
Recent Answers
- Joshua Engel on Why fry rice before boiling?
- haakon.io on Why fry rice before boiling?
- Jon Church on Why fry rice before boiling?
- Lex on Does Google Analytics track 404 page responses as valid page views?
- Peter Machado on Why fry rice before boiling?
Recent Questions
- How can I transform graph image into a tikzpicture LaTeX code?
- How Do I Get The Ifruit App Off Of Gta 5 / Grand Theft Auto 5
- Iv’e designed a space elevator using a series of lasers. do you know anybody i could submit the designs too that could manufacture the concept and put it to use
- Need help finding a book. Female OP protagonist, magic
- Why is the WWF pending games (“Your turn”) area replaced w/ a column of “Bonus & Reward”gift boxes?