如何在HTML的<div class="row">中排列两组垂直按钮并添加分隔线

Looks like you're already on the right track with Bootstrap's grid system! We can absolutely get those two vertical button groups side-by-side with a divider in between. Here's a polished, responsive solution tailored to your existing code:

Step-by-Step Implementation #

First, let's refine the vertical button stacking and add the divider using Bootstrap's utility classes (works for Bootstrap 4/5):

<div class="row align-items-start"> <!-- Align groups to the top; use align-items-center for vertical centering -->
    <!-- First Vertical Button Group -->
    <div class="col-md-4">
        <h4>@TextResources.ActiveProcesses</h4>
        <!-- Use flex column layout for clean vertical stacking with consistent spacing -->
        <div class="d-flex flex-column gap-2 mt-2">
            @foreach (var process in Model)
            {
                <!-- Switch to <button> for better semantics (instead of <div>) -->
                <button class="btn btn-default">@GetString(process.ActionName)</button>
            }
        </div>
    </div>

    <!-- Vertical Divider Column -->
    <div class="col-md-1 d-flex justify-content-center align-items-stretch">
        <!-- Bootstrap 5: Use built-in vertical divider class -->
        <div class="vr"></div>

        <!-- Bootstrap 4 Fallback (custom style if you're on older Bootstrap) -->
        <!-- <div style="width: 1px; background-color: #dee2e6; height: 100%;"></div> -->
    </div>

    <!-- Second Vertical Button Group -->
    <div class="col-md-4">
        <h4>@TextResources.YourSecondHeadingText</h4> <!-- Fixed your truncated heading to match the first group's level -->
        <div class="d-flex flex-column gap-2 mt-2">
            <!-- Replace with your second button loop -->
            @foreach (var item in YourSecondDataset)
            {
                <button class="btn btn-default">@GetString(item.ActionName)</button>
            }
        </div>
    </div>
</div>

Key Improvements Explained: #

• Vertical Button Stacking: The d-flex flex-column gap-2 combo creates a clean vertical layout with consistent spacing between buttons (no messy margin hacks!). mt-2 adds a small top margin to separate the heading from the buttons.
• Semantic Buttons: Swapped <div class="btn"> for <button class="btn">—this is better for accessibility and ensures proper interaction behavior (like keyboard navigation).
• Centered Full-Height Divider: The middle col-md-1 uses d-flex justify-content-center align-items-stretch to center the divider and make it stretch the full height of the column, matching the button groups.
  • Bootstrap 5 users get the vr class out of the box for ready-made vertical dividers.
  • Bootstrap 4 users can use the custom inline style to replicate the same effect.
• Responsive Behavior: On screens smaller than md (768px), the columns will stack vertically automatically—this is mobile-friendly and doesn't require extra media queries.

Optional Tweaks: #

• If you want the divider to only span part of the height (not full column), replace align-items-stretch with align-items-center and add a height class like h-75 to the divider element (e.g., <div class="vr h-75"></div>).
• Adjust column widths (e.g., col-md-5, col-md-2, col-md-5) if you want more space around the divider or button groups.

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