درود
در بوتسترپ 4 کلاسی به نام form-row اضافه شده که پدینگ ستون ها را کم میکند تا به کامپونت های فورم شما جلوه ی بهتری دهد . نمونه:
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
لینک رفرنس:
https://getbootstrap.com/docs/4.0/components/forms/#form-row
این کلاس در بوتسترپ 3 وجود نداشت که با این کلاس میتونید این قابلیت رو به بوتسترپ 3 هم اضافه کنید:
@media only screen and (min-width : 768px) {
.my-form-col > div {
padding-left: 5px !important;
padding-right: 5px !important;
}
.my-form-col > div:first-child{
padding-left: 0 !important;
}
.my-form-col > div:last-child{
padding-right: 0 !important;
}
}
<div class="container">
<h1>With Awesome Padding</h1>
<form class="form-horizontal">
<div class="form-group my-form-col">
<div class="col-sm-2">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group my-form-col">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="test">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="test">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="test">
</div>
</div>
</form>
<h1>Original Column</h1>
<form class="form-horizontal">
<div class="form-group ">
<div class="col-sm-2">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group ">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="test">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="test">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="test">
</div>
</div>
</form>
</div>