如何在Bootstrap中创建响应式网格及分辨率切换按钮

Here's a complete, human-friendly implementation that meets your requirements:

Full Working Code #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Grid Demo</title>
    <!-- Bootstrap CSS (use local path if you have it downloaded) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS for screen simulation -->
    <style>
        /* Simulate different screen sizes by limiting container width */
        .simulate-xs .container {
            max-width: 575px; /* Just below small breakpoint */
        }
        .simulate-sm .container {
            max-width: 767px; /* Just below medium breakpoint */
        }
        .simulate-md .container {
            max-width: 991px; /* Just below large breakpoint */
        }
        .simulate-lg .container {
            max-width: 1199px; /* Just below extra-large breakpoint */
        }
        .simulate-normal .container {
            max-width: none; /* Reset to full window width */
        }

        /* Optional: Make grid items easier to see */
        .grid-item {
            background: #f0f2f5;
            border: 1px solid #dee2e6;
            padding: 20px;
            margin-bottom: 15px;
            text-align: center;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <!-- Resolution Toggle Buttons -->
    <div class="container mt-4 mb-4">
        <button class="btn btn-primary me-2" data-size="normal">Normal View</button>
        <button class="btn btn-secondary me-2" data-size="lg">Large (4 Columns)</button>
        <button class="btn btn-secondary me-2" data-size="md">Medium (3 Columns)</button>
        <button class="btn btn-secondary me-2" data-size="sm">Small (2 Columns)</button>
        <button class="btn btn-secondary" data-size="xs">Extra Small (1 Column)</button>
    </div>

    <!-- Bootstrap Grid Layout -->
    <div class="container">
        <div class="row">
            <!-- Responsive grid items -->
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="grid-item">Item 1</div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="grid-item">Item 2</div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="grid-item">Item 3</div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="grid-item">Item 4</div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="grid-item">Item 5</div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="grid-item">Item 6</div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="grid-item">Item 7</div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="grid-item">Item 8</div>
            </div>
        </div>
    </div>

    <!-- Toggle Logic -->
    <script>
        // Add click handlers to all toggle buttons
        document.querySelectorAll('.btn[data-size]').forEach(button => {
            button.addEventListener('click', function() {
                // Clear existing simulation classes
                document.body.classList.remove('simulate-xs', 'simulate-sm', 'simulate-md', 'simulate-lg', 'simulate-normal');
                // Apply the selected simulation
                document.body.classList.add(`simulate-${this.dataset.size}`);
            });
        });
    </script>
</body>
</html>

Key Features Explained #

1. Responsive Grid Setup #

We use Bootstrap's built-in column classes to define the layout for every screen size:

• col-12: 1 column on extra-small screens (<576px)
• col-sm-6: 2 columns on small screens (≥576px)
• col-md-4: 3 columns on medium screens (≥768px)
• col-lg-3: 4 columns on large screens (≥992px)

Bootstrap automatically switches between these classes based on the current window width.

2. Screen Toggle Functionality #

The custom CSS classes (simulate-xs, simulate-sm, etc.) restrict the container's width to match Bootstrap's breakpoint limits. This lets you preview how the grid looks on different screen sizes without resizing your browser window.

The JavaScript handles switching between these classes when you click the buttons, ensuring only one simulation is active at a time.

3. Optional Extras #

The .grid-item styles add subtle backgrounds and borders to make the grid items easier to distinguish. Feel free to tweak these styles to match your project's design.

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