Bootstrap按钮组中mr-2、mb-3的作用是什么？离线如何查询？

Hey Anna, great questions—let's unpack this step by step!

What do mr-2 and mb-3 actually do? #

These are part of Bootstrap's spacing utility classes—a set of pre-built classes that let you add margin/padding without writing custom CSS. They follow a straightforward naming rule:

• The first letter (m here) = margin (use p if it's padding)
• The second letter (r for mr-2, b for mb-3) = direction:
  • t = top, b = bottom, l = left, r = right, x = left+right, y = top+bottom
• The number (2 or 3) = a predefined spacing value from Bootstrap's scale. By default:
  • 2 translates to 0.5rem (8px)
  • 3 translates to 1rem (16px)

Applying this to your code:

• mr-2 on the .btn-group adds 0.5rem of right margin to the button group, creating space between it and the next element in the toolbar.
• mb-3 on the .btn-toolbar adds 1rem of bottom margin to the entire toolbar, so any content below it gets pushed down by that amount.

How to look up these classes offline #

You don't need an internet connection to figure this out—here are three solid methods:

• Check Bootstrap's local CSS file
  If you downloaded Bootstrap's source files (instead of using a CDN), open bootstrap.css or bootstrap.min.css and search for the class name. You'll see the exact CSS rules, like:

  .mr-2 {
    margin-right: 0.5rem !important;
  }
  

• Use Bootstrap's offline documentation
  When you have internet, download Bootstrap's full package (including docs) from their site. Unzip it, and you can open the index.html in the docs folder anytime offline. The utility classes section covers spacing, colors, and all other helper classes in detail.
• Memorize the naming convention
  Bootstrap's utility classes follow consistent patterns. Once you get the hang of the spacing rule ([m/p][direction]-[scale-number]), you can guess what most classes do without looking them up. The scale numbers 0-5 map to 0, 0.25rem, 0.5rem, 1rem, 1.5rem, and 3rem by default.

内容的提问来源于stack exchange，提问作者Anna Klein