Twitter bootstrap 为什么2个col-12 div没有封装在引导4中？

两张具有col-12等级的引导4卡并排放置且不包装，为什么

我是头球手 搜索

---

也可以在

上找到。如果您要在此处包装许多类，您可以在此处删除一堆内容，并基本上对其进行重组：

<div class="container">
    <header>
       <!-- header can be seperated -->
       <div class="row">
        <div class="col-12 font header">
            i am header
         </div>
       </div>
    </header>


     <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body ">

                    <input placeholder="Enter the link or search phrase" id="search" type="text" class="form-coltrol col-7">
                    <button id="download" class="font btn btn-primary">
                        search
                    </button>
                </div>
            </div>
            <div class="card" style="background:silver">
                <div class="variants card-body d-flex justify-content-center ">
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="row">

            </div>
        </div>
        <div class="col-sm-12 footer"></div>
    </div>
</div>

尝试从上的此标记展开。请注意，我基本上删除了大多数col类，它们实际上应该只在row之后直接使用。如果使用w-75，则不应使用col类。您还应该将卡片放在列中，而不是在一个元素中定义列和卡片

谢谢，现在看起来很完美！