Загрузочные карты не могли правильно распределиться по сетке

ProgramBox

Загрузочные карты не могли правильно распределиться по сетке

Post author:admin
Запись опубликована:11 января, 2022
Post category:Вопросы по программированию

#html #web #bootstrap-cards

Вопрос:

shop.html

 {% extends 'base.html' %} 

{% block content %} 
<div class="container">
  <!-- Product List -->
  <br>
  <h2 align="center">List of Products</h2>
  <br>
  <div class="row">
  {% for product in products %} 
  <div class="col-3 col-md-3 col-sm-3">
    
    <div class="card">
      <form method="POST" action="{% url 'add_to_cart' product.id %}">
        {% csrf_token %} 
        <img src="{{ product.image.url }}" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 name="item" class="card-title">{{product.name}}</h5>
            <div class="card-text">
                <p>Category: {{ product.category }}</p>
                <p>Price:</p>
                <p style="text-decoration: line-through;color:red;">{{ product.price }}</p>
                <p style="color:blue;">{{ product.discount_price }}</p>
            </div>
            <hr>
            <input name="quantity" type="number" value="1">
            <input type="submit" class="btn btn-primary" value="Add to Cart">
      </form>
      
    </div>
    
  </div>
  {% endfor %}
</div> 
</div>
  
{% endblock %}

base.html

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Shopping System</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r 8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
    {% include 'navbar.html' %} 
    {% block content %} {% endblock %} 
    <!-- JavaScript Bundle with Popper -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <!--  -->
</body>
</html>

Для этого кода я использовал класс col-3 , а второй продукт все еще находится под первым продуктом. Вместо этого я хотел бы поместить вторую карточку продукта рядом с первой. Я взял код из системы сетки загрузочных карт, но он по-прежнему не работает, хотя я вставил в него необходимые ссылки на css и javascript base.html для начальной загрузки . Могу я спросить, что мне нужно изменить, чтобы карты были 3 в ряд?

1. Правильно ли загрузился CSS начальной загрузки? Снимок экрана выглядит так, как будто CSS не загрузился.

2. Это то, что я должен правильно загрузить загрузочный css и javascript на base.html ?

3. Да, похоже, что ваш загрузочный css и необходимый js не загрузились.

4. Где я должен найти правильные css и js, чтобы правильно создать сетку страниц?

5. Я скопировал пакет css и js и отдельные файлы и вставил их в голову и тело соответственно из getbootstrap.com/docs/5.1/getting-started/introduction

Ответ №1:

В идеале у вас должен быть контейнер div, затем строка a внутри строки, в которой вы объявляете свои столбцы(в данном случае мы используем размер 3 для colum). Дайте мне знать, если это будет полезно.

 <div class="container">
    <!-- Product List -->
    <div class="row justify-content-center">
    {% for product in products %} 
    <div class="col-3 col-md-3 col-sm-3">
      
      <div class="card">
        <form method="POST" action="{% url 'add_to_cart' product.id %}">
          {% csrf_token %} 
          <img src="{{ product.image.url }}">
          <div class="card-body">
            <h5 name="item" class="card-title">{{product.name}}</h5>
              <div class="card-text">
                  <p>Category: {{ product.category }}</p>
                  <p>Price:</p>
                  <p style="text-decoration: line-through;color:red;">{{ product.price }}</p>
                  <p style="color:blue;">{{ product.discount_price }}</p>
              </div>
              <hr>
              <input name="quantity" type="number" value="1">
              <input type="submit" class="btn btn-primary" value="Add to Cart">
        </form>
        
      </div>
      
    </div>
    {% endfor %}
</div> 
  </div>

1. Результат по — прежнему остается неизменным

2. Можете ли вы проверить, правильно ли связан bootstrap? У меня была проблема с загрузочной сеткой ранее, тогда я сделал демонстрацию здесь stealth-ossified-nylon.glitch.me/items.html и github находится здесь github.com/naftalimurgor/bootstrap-grid-demo.git очень похожий случай с этим

3. Я думаю, что bootstrap неправильно связан с вашей страницей. Вы проверяли свои средства разработки браузера при загрузке страницы?

4. Как я могу проверить, правильно ли он связан?

5. нажмите ctrl shift i на клавиатуре, находясь на странице. Это откроет инструменты разработки. проверьте это на вкладке сеть. Проверьте, загружается ли загрузчик

Метки: Загрузочные карты не могли правильно распределиться по сетке