求助：基于Bootstrap实现Radio Button驱动的条形图，支持X轴下方标签、锁/解锁图标及选中变色功能

Let's get your interactive bar graph working exactly how you want it—vertical bars with labels below, lock/unlock icons at the top, and green highlights when selected. Here's the revised code and breakdown of the fixes:

Key Issues in Your Original Code #

• Duplicate IDs: All radio buttons had the same id="radio", which broke label association and selection behavior.
• Layout Misalignment: Labels were positioned next to bars instead of below them, and the bar structure wasn't properly set up for vertical bars.
• Missing Selected State Styling: No CSS rule to change the bar color when a radio button is checked.
• Icon Positioning: Lock/unlock icons weren't properly anchored to the top of each bar.

Revised Complete Code #

HTML #

<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="//adminlte.io/themes/v3/plugins/fontawesome-free/css/all.min.css">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="team-bar d-flex gap-3">
      <!-- Team 1 -->
      <div class="team-bar-item text-center">
        <input id="radio-team1" type="radio" class="radio-input" value="team1" name="assetvalue">
        <label for="radio-team1" class="bar-container">
          <div class="lock-unlock-icons">
            <i class="fa fa-lock text-danger me-2"></i>
            <i class="fa fa-unlock text-success"></i>
          </div>
          <div class="bar bg-primary"></div>
        </label>
        <span class="bar-label">Team 1</span>
      </div>

      <!-- Team 2 -->
      <div class="team-bar-item text-center">
        <input id="radio-team2" type="radio" class="radio-input" value="team2" name="assetvalue">
        <label for="radio-team2" class="bar-container">
          <div class="lock-unlock-icons">
            <i class="fa fa-lock text-danger me-2"></i>
            <i class="fa fa-unlock text-success"></i>
          </div>
          <div class="bar bg-primary"></div>
        </label>
        <span class="bar-label">Team 2</span>
      </div>

      <!-- Team 3 -->
      <div class="team-bar-item text-center">
        <input id="radio-team3" type="radio" class="radio-input" value="team3" name="assetvalue">
        <label for="radio-team3" class="bar-container">
          <div class="lock-unlock-icons">
            <i class="fa fa-lock text-danger me-2"></i>
            <i class="fa fa-unlock text-success"></i>
          </div>
          <div class="bar bg-primary"></div>
        </label>
        <span class="bar-label">Team 3</span>
      </div>

      <!-- Team 4 -->
      <div class="team-bar-item text-center">
        <input id="radio-team4" type="radio" class="radio-input" value="team4" name="assetvalue">
        <label for="radio-team4" class="bar-container">
          <div class="lock-unlock-icons">
            <i class="fa fa-lock text-danger me-2"></i>
            <i class="fa fa-unlock text-success"></i>
          </div>
          <div class="bar bg-primary"></div>
        </label>
        <span class="bar-label">Team 4</span>
      </div>

      <!-- Team 5 -->
      <div class="team-bar-item text-center">
        <input id="radio-team5" type="radio" class="radio-input" value="team5" name="assetvalue">
        <label for="radio-team5" class="bar-container">
          <div class="lock-unlock-icons">
            <i class="fa fa-lock text-danger me-2"></i>
            <i class="fa fa-unlock text-success"></i>
          </div>
          <div class="bar bg-primary"></div>
        </label>
        <span class="bar-label">Team 5</span>
      </div>
    </div>
  </div>
</div>

CSS #

/* Hide the actual radio button but keep it clickable */
.radio-input {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

/* Container for each bar item */
.team-bar-item {
  position: relative;
  width: 80px; /* Adjust bar width as needed */
}

/* Bar container (holds icons and bar) */
.bar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

/* Lock/unlock icons at the top */
.lock-unlock-icons {
  margin-bottom: 10px;
}

/* The vertical bar */
.bar {
  width: 100%;
  height: 300px; /* Adjust bar height as needed */
  border-radius: 4px;
  transition: background-color 0.3s ease;
  border: 1px solid #ccc;
}

/* Label below the bar (X-axis label) */
.bar-label {
  display: block;
  margin-top: 10px;
  font-weight: 500;
}

/* Change bar color to green when radio is checked */
.radio-input:checked + .bar-container .bar {
  background-color: #28a745; /* Bootstrap success green */
}

/* Hover effect for bars */
.bar-container:hover .bar {
  background-color: #007bff; /* Darker primary on hover */
}

What Changed & Why #

1. Unique IDs: Each radio button now has a unique ID (e.g., radio-team1) so labels correctly associate with their inputs.
2. Flex Layout: Used Bootstrap's d-flex and custom flex classes to align bars horizontally with spacing, and labels below each bar.
3. Checked State Styling: The :checked pseudo-class with adjacent sibling selectors targets the bar when its radio is selected, changing it to Bootstrap's success green.
4. Icon Placement: Lock/unlock icons are placed at the top of each bar container, above the bar itself.
5. Cleaner Structure: Removed inline styles that conflicted with Bootstrap, and organized elements into logical containers for easier styling.

This setup works seamlessly with Bootstrap, keeps your lock/unlock icons, displays labels below each bar, and highlights selected bars in green. You can adjust the width and height values in the CSS to match your desired bar size!

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