引导卡在 bootstrapemail 中不起作用答案

【问题标题】：Bootstrap cards not working in bootstrapemail引导卡在 bootstrapemail 中不起作用
【发布时间】：2020-04-29 01:11:04
【问题描述】：

我有一个用卡片构建的漂亮网页，但是当我将它粘贴到返回纯 css 代码的 bootstrapemail 编辑器的编辑器中时，它们似乎无法正常工作。

<!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">
    <title>Vrindavan Chandrodaya Mandir</title>
    <meta name="description" content="">
    <meta name="author" content="LayoutIt!">
    <!--Template based on URL below-->
    <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/starter-template/">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!--  <link href="css/bootstrap.min.css" rel="stylesheet">-->
    <!--    <link href="css/Bootstrap.css" rel="stylesheet">-->
</head>

<body class="" style="background-color: azure">

  <div class="card-deck">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
      <div class="card-footer">Hare Krishna</div>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
</div>
    <!-- Bootstrap core JavaScript
        ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


</body></html>

我正在使用 https://bootstrapemail.com/editor 获取纯 CSS 来制作一些漂亮的电子邮件。我哪里错了？我只知道 bootstrap 作为我的设计平台。

【问题讨论】：

不要使用那种类型的邮件，使用纯 flexbox 制作你的电子邮件，它减少你的代码，你可以毫无畏惧地编辑你的 css
我会试试的

标签： html css bootstrap-4 bootstrap-cards

【解决方案1】：

我浏览了您的code and with bootstrap email，发现您错过了一些像container 这样的div。你没有提到 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 和他们一样。

//Here is a sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" media="all" href="/assets/application-mailer-dbc5154d3c4160e8fa7ef52fa740fa402760c39b5d22c8f6d64ad5999499d263.css" />
   <style><!-- Add custom styles that you want inlined here --></style>
 </head>

<body class="bg-light">
<preview>Thank you for riding with Lyft!</preview>
<div class="container">
  <img class="mx-auto mt-4 mb-3" width="42" height="30" src="https://s3.amazonaws.com/lyft.zimride.com/images/emails/logo/v2/logo_44@2x.png" />
   <div class="card mb-4" style="border-top: 5px solid #ff00bf;">
  <div class="card-deck">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
      <div class="card-footer">Hare Krishna</div>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
</div>
</div>
</div>
</body></html>

//结果

【讨论】：