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>

尝试从此标记开始扩展。请注意，我基本上删除了大多数列类，它们实际上仅应在“行”之后直接使用。如果您使用w-75，则不应使用col类。您还应该将卡片保留在列内，并且不要在一个元素中定义列和卡片。

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

1 个答案: