我正在尝试样式引导CSS列col-xl，这样我将能够有5或6卡/瓷砖在我的页面上，而不是4（页面图像附加），而不接触其他网格布局。然而，在这一点上，我不知道如何实现这一点。下面是我的代码：

{% extends 'base.html' %}

{% load static %}


{% block content %}
  <h2>My Meals</h2>

  <div class='py-4 mt-auto'>
    <div class='container px-4'>

      <div class="row meal-tiles">
        {% for meal in meals %}
          <div class="col-sm-12 col-md-12 col-lg-4 col-xl-3 d-flex align-items-stretch meal-tile">
            <div class="card mb-3 meal-tile-border">
                {% if meal.image %}
                  <img src="{{ meal.image.url }}" alt="{{ meal.name }}" class="img-fluid" style="height: 200px;">
                {% else %}
                  <img src="{% static 'images/mealdefault.png' %}" alt="Default Image" class="img-fluid" style="height: 200px;">
                {% endif %}

              <div class="card-body">

                <h4 class='card-title'> <strong>{{ meal.name }}</strong></h4>
                {% with macros=meal.calculate_total_macros %}
                  <p>Kcal in 100g: {{ macros.total_kcal_per_100g }}</p>
                  <p>Carbohydrates in 100g: {{ macros.total_carbohydrates_per_100g }}</p>
                  <p>Fats in 100g: {{ macros.total_fats_per_100g }}</p>
                  <p>Proteins in 100g: {{ macros.total_proteins_per_100g }}</p>
                  <p>Glycemic Load in 100g: {{ macros.total_glycemic_load_per_100g }}</p>
                  <p>Glycemic Index: {{ macros.average_glycemic_index }}</p>
                {% endwith %}
              </div>

            </div>
          </div>
        {% empty %}
          <div class="col-12">
            <p>No meals found.</p>
          </div>
        {% endfor %}
      </div>

    </div>
  </div>
{% endblock %}

字符串
我试过在main.css文件中为.col-xl设置css样式，但是效果不佳。如果我尝试只是样式边距，然后它设置为所有其他布局这是罚款，我真的不想触摸他们
我在main.css文件中尝试了以下操作：第一个月
x1c 0d1x的数据