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

Question

我正在使用 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 标签中是唯一的解决方案吗？

Answer 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>

1. 你可以简单地给它添加新的类，例如，假设下面的div是我要添加CSS的地方

   然后将卡片粘贴到这里

   然后继续这样的风格 .myNewCss{ 风格在这里