Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Lausselloic opened this issue Oct 25, 2016 · 0 comments
Closed

Comments

@Lausselloic
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants