时间戳

首页 > 解决方案 > Magento 1.9：如何将 HTML、BOOTSTRAP 和 CSS 添加到静态块？

html - Magento 1.9：如何将 HTML、BOOTSTRAP 和 CSS 添加到静态块？

问题描述

以下是我的带有引导设计的响应式 html 代码，如果我添加到 CMS->Page->Content 我的 cms 页面看起来像折叠、页眉和页脚对齐问题。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</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.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container" style="font-size: larger;">
  <h2>Kolupadi Manual</h2>
  <p>All kind of Kolu Padi Manual list</p>
  

  <h4 align="center"><u>3 Steps Kolupadi</u></h4>
  <div class="card-columns">
    <div class="card bg-light">

      <div class="card-body text-center">
        <a href="https://abc.in/media/Kolu%20padi%20Assemble%20&%20Dismantle%20Instruction/compact%20kolu%20padi/Assemble%20&%20Dismantle%20Instruction/3%20Compact%20Kolupadi%20-%202017.pdf" class="card-text">3 Compact Kolu Padi </a>
      </div>
    </div>

    <div class="card bg-light">

      <div class="card-body text-center">
        <a href="https://abc.in/media/kolupadi-pdf/regular/3_regular_booklet_2017.pdf" class="card-text">3 Regular Kolupadi
       </a>
      </div>
    </div>

    <div class="card bg-light">

      <div class="card-body text-center">
        <a href="https://abc.in/media/kolupadi-pdf/triple/3_trible_booklet_2017.pdf" class="card-text">3 Triple Kolu Padi
       </a>
      </div>
    </div>
  </div>
  <br>

    

    <h4 align="center"><u>5 Steps Kolupadi</u></h4>
    <div class="card-columns">
    <div class="card bg-light">

      <div class="card-body text-center">
        <a href="https://abc.in/media/Kolu%20padi%20Assemble%20&%20Dismantle%20Instruction/compact%20kolu%20padi/Assemble%20&%20Dismantle%20Instruction/5%20Compact%20%20BOOKLET-2017.pdf" class="card-text">5 Compact Kolu Padi </a>
      </div>
    </div>

    <div class="card bg-light">

      <div class="card-body text-center">
        <a href="https://abc.in/media/kolupadi-pdf/regular/5_regular_booklet_2017.pdf" class="card-text">5 Regular Kolupadi
       </a>
      </div>
    </div>

    <div class="card bg-light">

      <div class="card-body text-center">
        <a href="https://abc.in/media/kolupadi-pdf/triple/5_triple_booklet_feb_2017.pdf" class="card-text">5 Triple Kolu Padi
       </a>
      </div>
    </div>
  </div>
  <br>

  <h4 align="center"><u>7 Steps Kolupadi</u></h4>
    <div class="card-columns">
    <div class="card bg-light">

      <div class="card-body text-center">
        <a href="https://abc.in/media/Kolu%20padi%20Assemble%20&%20Dismantle%20Instruction/compact%20kolu%20padi/Assemble%20&%20Dismantle%20Instruction/7%20Compact%20%20BOOKLET-2017.pdf" class="card-text">7 Compact Kolu Padi </a>
      </div>
    </div>

    <div class="card bg-light">

      <div class="card-body text-center">
        <a href="https://abc.in/media/kolupadi-pdf/regular/7_regular_booklet_2017.pdf" class="card-text">7 Regular Kolupadi
       </a>
      </div>
    </div>

    <div class="card bg-light">

      <div class="card-body text-center">
        <a href="https://abc.in/media/kolupadi-pdf/triple/7_triple_booklet_feb_2017.pdf" class="card-text">7 Triple Kolu Padi
       </a>
      </div>
    </div>
  </div>
  <br>

  <h4 align="center"><u>9 Steps Kolupadi</u></h4>
    <div class="card-columns">
<!--     <div class="card bg-light">

      <div class="card-body text-center">
        <a href="https://abc.in/media/Kolu%20padi%20Assemble%20&%20Dismantle%20Instruction/compact%20kolu%20padi/Assemble%20&%20Dismantle%20Instruction/3%20Compact%20Kolupadi%20-%202017.pdf" class="card-text">3 Compact Kolu Padi </a>
      </div>
    </div> -->

    <div class="card bg-light">

      <div class="card-body text-center">
        <a href="https://abc.in/media/kolupadi-pdf/regular/9_regular_booklet_2017.pdf" class="card-text">9 Regular Kolupadi
       </a>
      </div>
    </div>

    <div class="card bg-light">

      <div class="card-body text-center">
        <a href="https://abc.in/media/kolupadi-pdf/triple/9_triple_booklet_2017.pdf" class="card-text">9 Triple Kolu Padi
       </a>
      </div>
    </div>
  </div>
  <br>




</div>




</body>
</html>

如果我直接将上面的代码添加到 CMS->Page->Content 中，页眉和页脚对齐就会崩溃。

将我的设计添加到我的街区的正确方法是什么？

标签： htmlbootstrap-4blockmagento-1.9

解决方案

推荐阅读