如何使用 BOOTSTRAP 电子邮件发送 HTML答案

【问题标题】：How can I send HTML with BOOTSTRAP email如何使用 BOOTSTRAP 电子邮件发送 HTML
【发布时间】：2021-06-04 10:00:43
【问题描述】：

如何发送 HTML 电子邮件以使其在 Bootstrap 4 中看起来不错？当我发送邮件时，它看起来不错，但是当接收者收到它时，它看起来很糟糕。这是代码：

https://jsfiddle.net/bluemilkyh/6m4v9pnf/1/

当他们填写表格并按下按钮时，我还想制作页脚表格（这是关于新闻订阅），然后按按钮保存到我的数据库（我已经有不是本地主机的数据库......）。

代码：

 <!DOCTYPE html>
<html>
<head>
    <title>Stanovanja Fink</title>
      <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

</head>

<!-- navbar -->
 
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="http://localhost/stanovanjefink/index.php">Stanovanja Fink</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" href="http://localhost/stanovanjefink/stanovanjeanja.php">Stanovanje Anja</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="http://localhost/stanovanjefink/stanovanjealjaz.php">Stanovanje Aljaž</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="http://localhost/stanovanjefink/kontakt.php">Kontakt</a>
      </li>
    </ul>
    </form>
 </div>
</nav>
<hr>
<body>
<div class="p-3 mb-2 bg-light text-dark container text-center d-flex flex-column align-items-center">
<h2 form-inline justify-content-center>Rezervacija Stanovanje Aljaz</h2>
<br>
<br>
<label ><b>Ime: </b></label>
    <input type="text" class=" form-control col-sm-6 " disabled value="" >
<label><b>Priimek: </b></label>
    <input type="text" class="form-control col-sm-6 " disabled value="" ><label><b>Telefon: </b></label>
    <input type="text" class="form-control col-sm-6" disabled value="">
<label><b>E-mail: </b></label>
    <input type="text" class="form-control col-sm-6" disabled value="">
<label><b>Prihod: </b></label>
    <input type="text" class="form-control col-sm-6" disabled value="">
<label><b>Odhod: </b></label>
    <input type="text" class="form-control col-sm-6" disabled value="">
<label><b>Cena: </b></label>
    <input type="text" class="form-control col-sm-6" disabled value="">
<br>
<h3>Informacije </h3>
<p><i class="gdlr-icon fa fa-map-marker"></i><b> Lokacija:</b> Pod Lipovim trotom</p>
<p><i class="gdlr-icon fa fa-phone"></i> <b>Telefon:</b> +36 41 8813 49219  </p>
<p><i class="gdlr-icon fa fa-envelope"></i> <b>Email :</b> +36 41 88213 49912  </p>
<br>
</div>
</body>
<footer class="bg-dark text-center">
  <div class="container p-4">
      <form action="kontakt.php">  
        <div class="row d-flex justify-content-center">
          <div class="col-auto">
            <p class="pt-2" style="color:white;">
              <b>Naroci se na novice: </b>
            </p>
          </div>
          <div class="col-md-5 col-12">   
            <div class="form-outline form-white mb-4">
              <input type="email" placeholder="email" name="novice" class="form-control" required>
            </div>
          </div>    
          <div class="col-auto">
            <button type="submit" class="btn btn-outline-light mb-4">
              Narocite se
            </button>
          </div>
        </div>
        <section class="mb-4">
      <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
        ><i class="fab fa-facebook-f"></i
      ></a>
      <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
        ><i class="fab fa-twitter"></i
      ></a>
      <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
        ><i class="fab fa-instagram"></i></a>  
    </section>
      </form>
  </div>
  <div class="text-center p-3" style="background-color:black; color:gray;">
    © 2020 Stanovanja Fink
  </div>
  </div>
</footer>`

【问题讨论】：

标签： php html bootstrap-4

【解决方案1】：

我猜你正在使用bootstrap。请改用bootstrap for e-mail。 Web 框架不能很好地处理电子邮件。与传统网站相比，HTML 电子邮件在如何为其开发标记方面具有不同的规则和最佳实践。

可能相关：

在此处查找最佳答案以获得有关电子邮件开发的总体思路：CSS Email Template at Outlook does not display correctly
这里是基本布局：How to make a fluid width email with a max width

【讨论】：