如何通过CSS/JS使表单最后一个.col-sm-6占100%宽度，脱离两列布局？

Since you can’t edit the HTML structure of the marketing automation form, you can use either CSS or JavaScript to force the last .col-sm-6 element to span the full width and align left, breaking out of the two-column layout. Here are two tested approaches:

CSS Approach (Simplest if Styles Aren’t Overridden) #

Use a targeted CSS selector to override the Bootstrap-style column width. Add this to your site’s custom CSS or the form’s embedded styles:

/* Target the final .col-sm-6 in the form's container */
/* Replace #form-container with your actual form parent ID/class if needed */
#form-container .col-sm-6:last-child {
    width: 100% !important;
    float: left !important;
    clear: both; /* Ensures it starts on a new line below two-column rows */
    max-width: 100% !important; /* Critical for Bootstrap flex grid setups */
}

• Why this works: The :last-child selector targets only the final .col-sm-6 element. The !important flag overrides default Bootstrap column styles (since you can’t modify original HTML classes). clear: both guarantees it doesn’t sit alongside the previous column.

JavaScript Approach (More Reliable for Stubborn Styles) #

If the CSS selector gets overridden by higher-priority styles, use JavaScript to set inline styles (which have the highest specificity):

// Wait for the form to load completely
document.addEventListener('DOMContentLoaded', function() {
    // Grab all .col-sm-6 elements in the form
    const columnElements = document.querySelectorAll('.col-sm-6');
    
    // Target the last element in the list
    const lastColumn = columnElements[columnElements.length - 1];
    
    if (lastColumn) {
        // Apply full-width styles directly to the element
        lastColumn.style.width = '100%';
        lastColumn.style.clear = 'both';
        lastColumn.style.float = 'left';
        // For Bootstrap flex layouts, uncomment these lines:
        // lastColumn.style.flex = '0 0 100%';
        // lastColumn.style.maxWidth = '100%';
    }
});

• Why this works: Inline styles take precedence over external CSS, so this reliably overrides any existing column width rules. The code waits for the DOM to load to ensure it targets the correct element.

Quick Tips #

• Double-check that the last .col-sm-6 is indeed the container for your Yes/No question (use your browser’s dev tools to inspect the element).
• If the form uses a flexbox layout instead of floats, adjust the CSS/JS to use flex: 0 0 100% and max-width: 100% instead of float.
• Test on mobile devices to ensure responsive behavior still works as expected.

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