How can I decrease the space between inputs with twitter bootstrap?
-
27-10-2019 - |
Pergunta
I'm using the css form styles from Twitter Bootstrap but I would like to decrease the default spacing between the form input fields. Not sure which css element I need to overwrite.
Any ideas?
Solução
If you're working with the default setup you can decrease the .line
margin to achieve your goal. Try this:
form .line {
margin-bottom: 5px; //adjust to your liking
}
This is of course if you're working with an input field separated by the line div that the bootstrap uses, e.g.:
<div class="line">
<label for="input">Full Name</label>
<div class="input">
<input type="text" name="input" size="30">
</div>
</div>
<div class="line">
<label for="input">Last Name</label>
<div class="input">
<input type="text" name="input" size="30">
</div>
</div>
...
Outras dicas
When using Bootstrap v2.1 I use their horizontal forms to reduce the height of my forms, I then find altering the .control-group bottom margin can give the desired effect.
Default is 20px I beleive, I use 8px
.form-horizontal .control-group {
margin-bottom: 8px;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow