时间戳

首页 > 解决方案 > 如何在 Booststrap 和 wagtail 中使用 css 类

css - 如何在 Booststrap 和 wagtail 中使用 css 类

问题描述

我正在使用 Bootstrap 主题，并且在一个特定位置，我想在页面上水平放置最多三张卡片。我有html：

<div class="container">
    <h1 class="text-center">{{ self.title }}</h1>
    <div class="card_deck;" style="display: table;">
        {% for card in self.cards %}    
            <div class="card;" style="display: table-cell; padding:20px;">
                A card goes here
            </div>
        {% endfor %}
    </div>
</div>

我有两个与此相关的问题：

  1. 如何让卡片在页面上居中？

  2. 处理CSS的最佳方法是什么？我显然不想弄乱 Bootstrap card 和 card_deck 元素，那么将样式保留在 div 标签中的唯一解决方案是什么？

标签： cssbootstrap-4wagtail

解决方案

如果您希望您的卡片具有引导类，具体取决于您拥有多少张卡片，您可以使用卡片上的类等于col-12/self.cards.length. 这是因为引导程序使用 12 个“部分”网格。因此，如果您有 2 列，则您有 col-6。6 来自 12/2 。这意味着如果您有 3 张卡，您将拥有 col-4，如果您有 4 张卡，您将拥有 col-3，依此类推。

我在下面制作了一个纯 javascript 示例，它大致重现了您想要实现的目标

const cards = [{
  text: 'card1 text'
}, {
  text: 'card2 text'
}, {
  text: 'card3 text'
}]

const card = document.querySelectorAll('.card');
card.forEach((c, i) => {
  c.classList.add(`col-${12/cards.length}`)
  c.innerHTML = cards[i].text
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h1 class="text-center">{{ self.title }}</h1>
  <div class="card_deck row">

    <div class="card" style="padding:20px;">

    </div>
    <div class="card" style="padding:20px;">

    </div>
    <div class="card" style="padding:20px;">

    </div>

  </div>
</div>

推荐阅读