Почему 2 col-12 div не переносятся в Bootstrap 4?

Question

Две карты Bootstrap 4 с классом col-12 помещаются рядом и не переносятся, почему ??

<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. Вы также должны хранить карточки внутри столбцов и не определять столбец и карту в одном элементе.