Как мне создать сетку вида карты HTML, CSS и Flask - PullRequest
Новая
       33

Как мне создать сетку вида карты HTML, CSS и Flask

0 голосов
/ 25 апреля 2020

Я использую код в моем индексе. html файл. 

    {% for post in blog_posts.items %}

    <div class="col-sm-6">
      <div class="card" >

        <div class="card-body">

          <h2><a class="card-title" href="  {{ url_for('blog_posts.blog_post', blog_post_id=post.id) }}">{{ post.title }}</a></h2>
          <a href="{{ url_for('users.user_posts', username=post.author.username) }}">Written By: {{ post.author.username }}</a>
          <p>Published on: {{ post.date.strftime('%Y-%m-%d') }}</p>
          <p class="card-text">{{ post.text[:100] }}...</p>
          <a href="{{ url_for('blog_posts.blog_post', blog_post_id=post.id) }}" class="btn btn-primary">Read Blog Post</a>

        </div>
      </div>
    </div>

   {% endfor %}

Насколько я понимаю, bootstrap состоит в том, что это создаст сетку из 6 столбцов, однако она просто складывает одну карту ниже следующий. Я уверен, что это то, что мне не хватает. Спасибо за помощь. enter image description here

Ответы [ 2 ]

1 голос
/ 25 апреля 2020

Для достижения этой цели вам, вероятно, понадобится колода карт или группа карт:

Я бы потерял этот div: 

<div class="col-sm-6">

Затем положил for l oop в пределах card-group div: 

<div class='card-group'>
    {% for post in blog_posts.items %}
      <div class="card" >
        <div class="card-body">
          ...
        </div>
    </div>
  {% endfor %}
</div>

Если вы хотите некоторый интервал между картами, вы можете изменить класс внешнего div на card-deck.

См. Карточные документы для дополнительных опций.

0 голосов
/ 25 апреля 2020

.col-sm-6{ display: flex } добавить это свойство css к родителю, который содержит все карты.

в качестве альтернативы вы можете использовать числа с плавающей запятой .col-sm-6 > .card{ float: left}

...