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

内哈·夏尔马

我是新手handlebar，我想水平放置2张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>

Ahmad Karimi |

尝试将脚本标签放在列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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。