为什么 2 个 col-12 div 不包装在引导程序 4 中

Question

两张带有 col-12 类的 Bootstrap 4 卡并排放置并且不包装，为什么？？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-12 font header">
            i am header
        </div>
        <div class="col-sm-12 justify-content-center d-flex">
            <div class="card col-sm-12 text-center w-75 mt-2">
                <div class="card-body d-flex justify-content-center ">
                    <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 col-sm-12 text-center w-75 mt-2" 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>

也可在 https://codepen.io/zzmaster/pen/gNEoaK

Answer 1

你在这里包装了很多类，你可以在这里删除一堆东西，基本上重组它：

<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- 类，它们实际上应该只在"行"之后直接使用。如果你使用 w-75，你不应该使用 col 类。您还应该将卡片保留在列内，而不是在一个元素中定义列和卡片。