twbs/bootstrap

custom-control + custom-control margin-left break display on mobile view

Closed this issue · 0 comments

Tested on Windows, Firefox 45.2 ESR, IE11 and Chrome 54
Onto the doc page : http://v4-alpha.getbootstrap.com/components/forms/#radios
The custom-controls display well on desktop, but when switching to mobile view, the margin-left into _custom-forms.scss push the second custom-control block.

Maybe it's better to put a margin-right onto each custom-control. But warning fo RTL maybe need to be reverted.

.custom-control {
position: relative;
display: inline-block;
padding-left: $custom-control-gutter;
cursor: pointer;

  • .custom-control {
    margin-left: $custom-control-spacer-x;
    }
    }

Display with the margin-left on mobile view :

radios with margin-left

Display with the margin-right

radios with margin-right

The other option (maybe not really robust), will be to remove the margin if viewport is lower than a fixed breakpoint?

Say to me if you want a pull-request