Bootstrap响应式页面文本消失问题求助（西门子S7-1200 PLC）

Hey there! I totally get how frustrating it is when text like the "1" in "Mixer 1" vanishes when you scale your browser or view on mobile—especially when you're just getting started with CSS/HTML/JS. Let's break down why this happens and fix it using Bootstrap's built-in tools plus a little simple CSS.

Why Your Text is Disappearing #

Most often, this happens because:

• Your rectangle container doesn't have enough padding, so text gets pushed outside the visible area
• The container shrinks too small on mobile, leaving no room for the full text
• There's no handling for text overflow, so extra characters just get cut off entirely

Step-by-Step Fixes #

Let's go through easy, beginner-friendly solutions:

1. Add Padding to Your Rectangles

First, give your text some breathing room inside the rectangle. Bootstrap has built-in padding classes (p-1, p-2, etc.) that work perfectly. For example:

<!-- Your original rectangle might look like this -->
<div class="border bg-light">Mixer 1</div>

<!-- Add padding with Bootstrap's p-2 class -->
<div class="border bg-light p-2">Mixer 1</div>

This keeps the text from touching the edges of the rectangle, so even when the container shrinks, the full text stays visible longer.

2. Let Text Wrap or Truncate Gracefully

If your container still gets too small on mobile, you have two options:

• Let text wrap to a new line: Use Bootstrap's text-wrap class. This will make "Mixer 1" split into two lines if needed:

  <div class="border bg-light p-2 text-wrap">Mixer 1</div>
  

• Show an ellipsis instead of cutting text: If you want to keep text on one line, use text-truncate (just make sure the container is a block-level element):

  <div class="border bg-light p-2 text-truncate" style="width: 80px;">Mixer 1</div>
  

  This will show "Mixer..." instead of cutting off the "1" entirely.

3. Use Bootstrap's Responsive Grid to Control Container Size

Instead of setting fixed widths for your rectangles, use Bootstrap's grid system (col-* classes) to make containers adjust smoothly across screen sizes. For example:

<div class="row">
  <!-- On desktop, take up 3 columns; on mobile, take up 6 columns -->
  <div class="col-md-3 col-sm-6 mb-3">
    <div class="border bg-light p-2 text-wrap">Mixer 1</div>
  </div>
  <div class="col-md-3 col-sm-6 mb-3">
    <div class="border bg-light p-2 text-wrap">Mixer 2</div>
  </div>
</div>

This ensures your rectangles don't shrink to an unreadable size on mobile.

4. Optional: Set a Minimum Width for Rectangles

If you want to make sure your rectangles never get smaller than a certain size, add a tiny bit of custom CSS:

.rectangle-container {
  min-width: 75px; /* Adjust this to fit your text */
}

Then apply the class to your rectangles:

<div class="border bg-light p-2 text-wrap rectangle-container">Mixer 1</div>

Full Example Code #

Here's a complete snippet putting it all together, which you can adapt for your PLC dashboard:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PLC Dashboard</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .rectangle-container {
      min-width: 75px;
      background-color: #e9ecef;
    }
  </style>
</head>
<body>
  <div class="container mt-4">
    <div class="row g-3">
      <div class="col-md-2 col-sm-4">
        <div class="border rounded rectangle-container p-2 text-wrap">Mixer 1</div>
      </div>
      <div class="col-md-2 col-sm-4">
        <div class="border rounded rectangle-container p-2 text-wrap">Mixer 2</div>
      </div>
      <!-- Add more rectangles here -->
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <!-- Your JSON/PLC data fetch script here -->
</body>
</html>

These changes should keep your text inside the rectangles no matter how you scale the browser or view on mobile. Start with the padding and text-wrap classes first—those are the simplest fixes for a beginner!

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