Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Spacing Not Working for Ordered List
See original GitHub issueI’m trying the spacing utility for this ordered list. I will use all -n3 for this test case. It works for every other resolution except for the ml-sm-n3 class. It only works for sm resolution if I use ml-n3 instead of ml-sm-n3 class.
Here’s the code;
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
</head>
<body>
<p>Spacing utility</p>
<div>  ↓</div>
<ol class="ml-sm-n3 ml-md-n3 ml-lg-n3 ml-xl-n3">
<li>Item</li>
<li>Item 2</li>
</ol>
</body>
</html>
Preview;
I’m using; Bootstrap: Version 4.4.1 Operating system: Microsoft Windows 10 Version 2004 (OS Build 19041.508) (64-bit) Browser: Microsoft Edge Version 85.0.564.51 (64-bit)
What am I doing wrong here?
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
That’s by design. See the above comments for more information on this as well. Beyond that, you’re using negative margin to override the default
padding-lefton<ol>s when you could change the padding instead..ml-n3would work.There’s no need for all of the other breakpoints since each class applies to all breakpoints above:
Is the same as: