Hey there! As someone who’s worked with Bootstrap 4 and custom design specs plenty of times, let’s walk through how to get your layout matching that Invision design perfectly, with dynamic scaling for containers, gutters, and even element sizing.

1. Calculate the Design Ratio for Dynamic Container Width #

First, let’s nail down the core ratio from your Invision specs:

Design full width (container-fluid): 1920px
Design container width: 1408px
Ratio = 1408 / 1920 = 73.333...%

Your current CSS uses a fixed pixel value for max-width, which is why your container matches the full screen width. Instead, we’ll use this percentage to make the container scale with the screen, while adding a max-width cap for large screens:

/* Override Bootstrap's default container max-widths */
@media (min-width: 576px) {
  .container {
    max-width: 73.33%;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 73.33%;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 73.33%;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1408px; /* Lock to design's max container width on large screens */
  }
}

This way:

• For screens smaller than 1200px, the container will always take up 73.33% of the full screen width
• Once the screen hits 1200px+ (approaching your design’s 1920px full width), the container stops growing at 1408px to avoid overly wide layouts on massive displays.

2. Match the Design's 16px Gutter Width #

Bootstrap’s default gutter (column spacing) is 30px, but your design calls for 16px. We’ll override the default padding/margin values to get this right:

/* Adjust container padding */
.container {
  padding-right: 8px;
  padding-left: 8px;
}

/* Adjust row margins */
.row {
  margin-right: -8px;
  margin-left: -8px;
}

/* Adjust column padding */
.col, [class*="col-"] {
  padding-right: 8px;
  padding-left: 8px;
}

The 8px split between left/right ensures columns have a total 16px gap between them, exactly matching your design.

3. Scale Fonts, Margins, and Padding Responsively #

To keep all page elements proportional to the design, you have a few solid options:

Option 1: Use vw Units for Perfect Proportional Scaling #

vw stands for viewport width (1vw = 1% of the screen width). Calculate the value based on your 1920px design:

• If your design uses 16px base font: 16 / 1920 * 100 = 0.8333vw
• For a 24px margin: 24 / 1920 * 100 = 1.25vw

Apply it like this:

/* Base font size scales with screen width */
body {
  font-size: 0.8333vw;
}

/* Example margin */
.section {
  margin-bottom: 1.25vw;
}

/* Example padding */
.card {
  padding: 0.8333vw;
}

This ensures every element scales perfectly with the screen, just like your design.

Option 2: Use clamp() to Limit Extreme Sizing #

If you want to prevent tiny text on small screens or oversized elements on huge displays, use clamp() to set min, ideal, and max values:

body {
  font-size: clamp(14px, 0.8333vw, 18px);
}

This keeps the font between 14px and 18px, while scaling proportionally in between.

Option 3: Combine rem with Media Queries #

Set a responsive root font size, then use rem units for all elements:

/* Root font size defaults */
html {
  font-size: 16px;
}

/* Scale root font from 16px to 18px between 1200px and 1920px */
@media (min-width: 1200px) {
  html {
    font-size: calc(16px + (18 - 16) * ((100vw - 1200px) / (1920 - 1200)));
  }
}

/* Lock root font at 18px for screens larger than design size */
@media (min-width: 1920px) {
  html {
    font-size: 18px;
  }
}

/* Use rem for elements */
.section {
  margin-bottom: 1.5rem;
}

This gives you precise control over sizing across breakpoints.

4. Test and Tweak #

After setting this up, use your browser’s dev tools to:

• Resize the screen and verify the container maintains the 73.33% ratio until it hits 1408px
• Check that column gaps are exactly 16px
• Confirm fonts, margins, and padding scale smoothly with screen width

内容的提问来源于stack exchange，提问作者Bishnu Paudel