search

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.46k stars 78.82k forks source link

CSS form-row class: element size exceeds parent #29243

Closed trueleader closed 5 years ago

trueleader commented 5 years ago

A form row html element exceeds the parents form width, due to -5px left and right margin on the .form-row css class.

As example the official https://getbootstrap.com/docs/4.3/components/forms/#form-row can be used for reproduction (Firefox and Chrome tested):

Result: The background of the input container exceeds the outline of the form I found this issue, because we have different background colors for different parts of one of our pages.

image image

florianlacreuse commented 5 years ago

It seems there's no issue here. BS grid works with cols using horizontal padding and cols container (parent) using negative horizontal margin to compensate cols padding on the left and right edges. Don't apply style to col or col-*, nor .container, .form-row, etc (unless you realy want to / know what you are doing).

trueleader commented 5 years ago

You mean: If a correct background color for a column is wanted, we must create an inner wrapper element and split the class assignments?

I tried the following which creates the desired result: <div class="form-row"><div class="col-1"><div class="bg-light"><label class="col-form-label">label 1</label></div></div><div class="col-2"><input type="text" class="form-control"></div></div>

But is this the way it should be done? If yes, I have to create another ticket at bootstrap-vue, which creates another structure

Edit: Seems the WYSIWYG editor doesn´t like newline inside "Insert code"

florianlacreuse commented 5 years ago

According to me, yes. Maybe you could wait for other opinions.

mdo commented 5 years ago

Seems the WYSIWYG editor doesn´t like newline inside "Insert code"

Multi-line code blocks require three backticks at beginning and end instead of the usual one.

The behavior you're seeing is intentional because of the use of padding in our grid classes. Use the nested elements as suggested to avoid interacting with the predefined grid classes.