Bootstrap 4 + Django模板：表单数据大屏并排布局问题求助

Let's get your layout sorted out! The main issues with your current code are invalid Bootstrap classes, incorrect nesting of elements, and missing the proper row/column structure needed for side-by-side alignment on large screens. Here's how to fix it:

Corrected Code #

<div class="container-fluid">
  <h1 class="my-4 text-center text-lg-left">Thumbnail Gallery</h1>
  {% block content %}
    {% for contexts in context %}
      <!-- Wrap each item in a row for horizontal alignment on large screens -->
      <div class="row mb-4">
        <!-- Text content column: full width on small, 8/12 on large -->
        <div class="col-12 col-lg-8">
          <h2>Title: {{ contexts.title }}</h2>
          <p>Category: {{ contexts.category }}</p>
          <p>Description: {{ contexts.description }}</p>
          <p>Price: {{ contexts.price }}</p>
          <p>Created: {{ contexts.created }}</p>
        </div>
        <!-- Image column: full width on small, 4/12 on large -->
        <div class="col-12 col-lg-4">
          <img class="img-fluid img-thumbnail" src="{{ contexts.document.url }}" alt="{{ contexts.title }}">
        </div>
      </div>
    {% endfor %}
  {% endblock %}
</div>

Key Fixes Explained #

• Proper Row/Column Structure: Bootstrap requires columns to be wrapped in a .row container to create the horizontal layout. Each item now has its own row with two columns.
• Valid Responsive Classes:
  • col-12: Makes each column take full width on small screens (so text and image stack vertically, which you said was working correctly).
  • col-lg-8/col-lg-4: On large screens (≥992px), the text takes 8 out of 12 columns, and the image takes 4—this puts them side-by-side.
• Correct Nesting: All text elements are now inside the text column, and the image is inside its own column. Your original code had text elements outside the column div, which broke the layout.
• Spacing: Added mb-4 to the row to add margin between each item for better readability.
• Image Alt Text: Added alt="{{ contexts.title }}" for accessibility (always a good practice!).

Why Your Original Code Failed #

• Invalid Classes: col-6-auto isn't a valid Bootstrap class. Bootstrap uses col-{breakpoint}-{size} or col-{breakpoint}-auto (but auto might not give you the consistent width you want here).
• Missing Row: Columns need a parent .row to function properly—without it, they'll stack vertically regardless of column size.
• Mismatched Divs: You closed the column div before most of your text content, meaning those elements weren't part of the grid system at all.

This should give you the side-by-side layout on large screens while keeping the stacked layout on small screens as you wanted.

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