为什么 2 个 col-12 div 不包含在 Bootstrap 4 中？

Question

两张 Bootstrap 4 col-12 class 的卡片并排放置，不换行，为什么？？


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

为什么 2 个 col-12 div 不包含在 Bootstrap 4 中？

Why 2 col-12 divs do not wrap in Bootstrap 4?

twitter-bootstrap

markup