AngularJS基于窗口大小动态设置列CSS（Mean.js项目）

Hey there! Since you're working with MEAN.js (which typically includes Bootstrap out of the box), ditching those predefined col-* classes for fixed-size panels that automatically adjust columns based on window size is totally achievable. Let's walk through two straightforward, effective approaches:

Approach 1: CSS Grid (Modern & Powerful) #

CSS Grid is perfect for this scenario—it lets you define responsive columns that auto-adjust based on available space, while keeping your panels at a fixed size.

Updated HTML #

First, simplify your container structure to focus on the panel wrapper:

<div class="container-fluid">
  <div class="panel-grid">
    <div class="fixed-panel" ng-repeat='item in itemList'>
      {{item.content}}
    </div>
  </div>
</div>

Custom CSS #

Add this to your project's custom stylesheet (make sure it loads after Bootstrap to avoid conflicts):

.panel-grid {
  display: grid;
  /* Auto-create as many columns as fit, min 280px wide, max filling available space */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* Space between panels */
  gap: 1.5rem;
  padding: 1rem;
}

.fixed-panel {
  /* Set your fixed panel height here */
  height: 220px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1.25rem;
  /* Optional: Add subtle shadow for depth */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

How it works:

• auto-fill tells the grid to create as many columns as possible within the container width.
• minmax(280px, 1fr) ensures each panel is at least 280px wide, and stretches to fill extra space if available.
• When the window shrinks, columns will automatically wrap into fewer rows—no media queries needed!

Approach 2: Flexbox (Simple & Widely Supported) #

If you prefer a more lightweight option, Flexbox works great too. It's slightly simpler for basic wrapping layouts.

HTML (Same as Grid Approach) #

<div class="container-fluid">
  <div class="panel-flex">
    <div class="fixed-panel" ng-repeat='item in itemList'>
      {{item.content}}
    </div>
  </div>
</div>

Custom CSS #

.panel-flex {
  display: flex;
  /* Allow panels to wrap when space runs out */
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1rem;
}

.fixed-panel {
  /* Fixed width, no stretching/shrinking by default */
  flex: 0 0 280px;
  height: 220px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Optional: Let panels stretch to fill space on larger screens */
@media (min-width: 1200px) {
  .fixed-panel {
    flex: 1 0 280px;
  }
}

How it works:

• flex-wrap: wrap makes panels jump to a new row when they can't fit in the current one.
• flex: 0 0 280px locks the panel width to 280px. The optional media query lets panels stretch on wider screens if you want.

Quick Tips for MEAN.js #

• Make sure your custom CSS is loaded after Bootstrap's styles—this ensures your rules take precedence.
• Adjust the 280px width and 220px height values to match your desired fixed panel size.
• Tweak gap to control the spacing between panels for better visual flow.

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