The columns can't shrink in width less than 30px (due to padding) so, as screen width narrows, eventually the columns wrap (stack vertically). To prevent this, adjust the padding on the columns inside the row
. Bootstrap 4 has a no-gutters
class for this purpose...
https://codeply.com/go/XaBsD5AhJG
<div class="container">
<div class="row no-gutters">
<label class="col-2 col-form-label">Email</label>
<div class="col-8">
<input type="text" class="form-control">
</div>
<div class="col-2 pl-1">
text
</div>
</div>
</div>
Bootstrap 4 also has padding utility classes classes that can be used to adjust padding on individual elements. For example, I used pl-1
(padding-left) on the last column to give a little space between the input and "text". Another Bootstrap 4 option is to use flex-nowrap
on the row
which will prevent wrapping and creating horizontal scrolling when there is overflow.
In Bootstrap 3, you need to add CSS to adjust the padding.
.no-gutters {
margin-right: 0;
margin-left: 0;
}
.no-gutters>[class*=col-] {
padding-right: 0;
padding-left: 0;
}
Related
Bootstrap col-xs wrapping
Bootstrap xs columns wrap
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…