Magento 1.9: Как добавить HTML, BOOTSTRAP и CSS в статический блок? - PullRequest
Новая
       20

Magento 1.9: Как добавить HTML, BOOTSTRAP и CSS в статический блок?

1 голос
/ 05 октября 2019

Ниже приведен мой отзывчивый 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, выравнивание верхнего и нижнего колонтитулов будет свернуто.

Как правильно добавить мой дизайн в мой блок?

...