css - 如何在嵌套引导网格之前清除所有 CSS？

Question

有什么东西干扰了我的网格。一切都应该正常工作。我在另一个 html 文件中将其作为单个网格进行了测试，结果符合预期。

<div id="bookpanel" class="container-fluid"  style="background-color:purple;" >
    <div class="row">
            <div class="col-md-12 col-12 col-sm-12 mb-4" style="background-color:grey;" >
                    ttt
            </div>
    </div>
    <div class="row">
            <div class="col-md-4 col-sm-4 col-4" id="bookfigure"   style="background-color:black;"   >
                        <img src = "/images1/aaa" class="img-responsive" title="" />
            </div>
            <div class="col-md-8 col-sm-8 col-8 " id="booktags"  style="background-color:grey;" >      
                        <div class="row" >
                                    <div class="col-md-10 col-sm-10 col-10"  style="background-color:blue;" >
                                        aaaa
                                    </div>
                                    <div class="col-md-2 col-sm-2 col-2"  style="background-color:yellow;" >
                                        bbbb
                                    </div>
                        </div>
                        <div class="row" >
                                    <div class="col-md-12 col-sm-12 col-12" style="background-color:red;" >
                                        tags:
                                    </div>
                        </div>
                        <div class="row" >
                                    <div class="col-md-12 col-sm-12 col-12" id="tagsdiv"  style="background-color:green;"  >
                                       ccc
                                    </div>
                        </div>
            </div>
    </div>
    <div class="row">
                <div class="col-md-4 col-sm-3 col-4" >
                    Views: 
                </div>
                <div class="col-md-4 col-sm-3 col-4">
                    <a href="" ><img src="/images/gifs/Download-Button.gif" style="width:100%;height:50px" /></a>
                </div>
                <div class="col-md-4 col-sm-3 col-4">
                    <a href="" ><span id="report">report</span></a>
                </div>
    </div>

但它不在更大的文件中，它显示如下图像：在手机的小屏幕中具有相同的行为。

3（红、绿、蓝）列应位于灰色框内

标签： cssbootstrap-4grid