如何修改Bootstrap 3中Jumbotron及其内段落的字体粗细？字号修改无效

Got it, let's tackle this problem head-on! The root issue here is that Bootstrap 3 has built-in default styles for the .jumbotron class and its child <p> element that are taking precedence over your custom CSS. Here's how to override them properly:

Why Your Current CSS Isn't Working #

• Bootstrap 3's .jumbotron has default styles that might be clashing, and its child <p> has separate font-weight and font-size rules out of the box. If your custom CSS loads before Bootstrap's stylesheet, Bootstrap's rules will overwrite yours every time.
• Your current selector only targets the .jumbotron container, not the <p> inside it—so the paragraph's font weight won't be affected by that rule.

Solution: Specific CSS Selectors to Override Bootstrap #

Use more targeted selectors to ensure your styles take priority, and make sure your custom CSS loads after Bootstrap's. Here's the adjusted code:

Updated CSS #

/* Target the jumbotron container with higher specificity */
.jumbotron.vertical-center {
  color: #dbdbdb;
  background-color: transparent;
  text-align: center;
  margin-top: 300px;
  font-weight: 200; /* Applies to the jumbotron's top-level text (like the h1) */
  font-size: 1.5rem; /* Your custom base font size here */
}

/* Explicitly target the paragraph inside the jumbotron */
.jumbotron.vertical-center p {
  font-weight: 200; /* Force the paragraph to use your desired weight */
  font-size: 1.1rem; /* Your custom paragraph size here */
}

Alternative: Use Parent Element Chaining #

If you prefer not to use the .vertical-center class in your selector, chain parent elements from your HTML to boost specificity:

header .container-fluid .jumbotron {
  font-weight: 200;
  font-size: 1.5rem;
  /* Keep your existing styles here */
}

header .container-fluid .jumbotron p {
  font-weight: 200;
  font-size: 1.1rem;
}

Last Resort: Use !important (If Needed) #

If you're still facing conflicts from other stylesheets, you can add !important to force your rules (though this is best avoided unless necessary):

.jumbotron {
  font-weight: 200 !important;
  font-size: 1.5rem !important;
}

.jumbotron p {
  font-weight: 200 !important;
  font-size: 1.1rem !important;
}

Critical Check: Load Order #

Make sure your custom CSS loads after Bootstrap's CSS in your HTML:

<!-- First load Bootstrap's stylesheet -->
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<!-- Then load your custom styles -->
<link rel="stylesheet" href="path/to/your-custom-styles.css">

This should make your font weight and size changes take effect as expected!

内容的提问来源于stack exchange，提问作者Wihan Uys