为什么 Bootstrap 行和列不能与车把一起使用？

Question

我是 handlebar 的新手，我正在尝试水平放置我的 2 张 Bootstrap 卡片。但它是垂直显示的。是因为车把的脚本标签吗？正如您在下图中看到的那样，即使我使用 bootstrap 列进行水平对齐，它也会垂直显示卡片

这是我的HTML代码

<div class="row mx-auto my-3">
<!--Script for Card 1-->
     <script id="card1" type="text/x-handlebars-template">
         <div class="col-sm-12 col-md-3">
             <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
                 <div class="card-body">
                     <p class="card-title">Today's Order: {{todayorders}}</p>
                     <p class="card-title">Current Week Order: {{currentweeksorder}}</p>
                 </div>
             </div>
         </div>
     </script>
     <!--Script for Card 2-->
     <script id="card2" type="text/x-handlebars-template">
         <div class="col-sm-12 col-md-3">
             <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
                 <div class="card-body">
                     <p class="card-title">Today's Order Amount: {{todaysamount}}</p>
                     <p class="card-title">Current Week Amount: {{currentweekamount}}</p>
                 </div>
             </div>
         </div>
     </script>
</div>

Answer 1

尝试将脚本标记放在列 div 中以强制它们适合这些列。

<div class="row mx-auto my-3">
    <div class="col-sm-12 col-md-3">
        <!--Script for Card 1-->
        <script id="card1" type="text/x-handlebars-template">
            <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
                <div class="card-body">
                    <p class="card-title">Today's Order: {{todayorders}}</p>
                    <p class="card-title">Current Week Order: {{currentweeksorder}}</p>
                </div>
            </div>
        </script>
    </div>
    <div class="col-sm-12 col-md-3">
        <!--Script for Card 2-->
        <script id="card2" type="text/x-handlebars-template">
            <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
                <div class="card-body">
                    <p class="card-title">Today's Order Amount: {{todaysamount}}</p>
                    <p class="card-title">Current Week Amount: {{currentweekamount}}</p>
                </div>
            </div>
        </script>
    </div>
</div>

为什么 Bootstrap 行和列不能与车把一起使用？

Why Bootstrap row and column are not working with handlebar?

html

javascript

handlebars.js

twitter-bootstrap