如何在 Booststrap 和 wagtail 中使用 css 类答案

【问题标题】：How to use css classes with Booststrap and wagtail如何在 Booststrap 和 wagtail 中使用 css 类
【发布时间】：2019-12-16 14:59:16
【问题描述】：

我正在使用 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>

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

如何让卡片在页面上居中？
处理 CSS 的最佳方法是什么？我显然不想乱用 Bootstrap 的 card 和 card_deck 元素，那么唯一的解决方案是将样式留在 div 标签中吗？

【问题讨论】：

通过使用display: table 和table-cell 你已经在使用引导程序，因为引导程序使用弹性元素。要使用引导程序，请尝试查看他们的示例。对card_deck 使用类row 并在card 元素上使用col-4。
将您的 css 放入包含在引导程序文件之后的外部 css 文件中，这样任何覆盖都与引导程序分开，并且不会破坏您的升级路径。也与您的问题无关 - 您课程中的分号无效
@MihaiT 谢谢。这就是我需要的。如果你把它作为一个答案，我会接受它
@Pete 谢谢。分号排序:)
@MihaiT col-4 假设有三张牌。我想要最多3张，如果只有2张卡怎么办？

标签： css bootstrap-4 wagtail

【解决方案1】：

对于 1. 将卡片置于页面中心

<div align='center' class='row'>
  <div class="row">
    <div class="col-sm">
      then paste the cards in here
    </div>
    <div class="col-sm">
      then paste the cards in here
    </div>
    <div class="col-sm">
      then paste the cards in here
    </div>
  </div>
</div>

你可以简单地添加新的类，例如，假设下面的 div 是我要添加 CSS 的地方
然后把卡片贴在这里
然后继续设置样式 .myNewCss{ 这里的风格 }

【讨论】：

align HTML5 不支持 HTML 属性。

【解决方案2】：

如果您希望您的卡片具有引导类，具体取决于您拥有的卡片数量，您可以使用等于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>

【讨论】：