Определение размера столбца не работает в начальной загрузке 4

Question

Я пытаюсь сделать так, чтобы ввод формы заполнял ширину экрана на небольших устройствах.Но это не работает.Он работает правильно на больших экранах, но не на телефонах, когда он должен реагировать.

<div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <h1 class="text-center" style="margin-top:100px;color:White;font-size:40pt;">Site in constructie</h1>
            </div>
            <div class="col-0 col-md-3"></div>
            <div class="col-12 col-md-6">
                <form id="subscribeForLaunch" class="input-group">
                    <input type="text" class="form-control" style="background:rgba(255,255,255,0.8);" placeholder="Email" />
                    <button class="btn btn-info">Submit!</button>
                </form>
            </div>
            <div class="col-0 col-md-3"></div>
        </div>
    </div>

Answer 1

Я проверил перед документацией, и col- * является действительным классом

Answer 2

Попробуйте это ...

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1 class="text-center" style="margin-top:100px;color:White;font-size:40pt;">Site in constructie</h1>
        </div>
        <div class="col-12 col-md-12 col-sm-12"></div>
        <div class="col-12 col-md-12 col-sm-12">
            <form id="subscribeForLaunch" class="input-group">
                <input type="text" class="form-control" style="background:rgba(255,255,255,0.8);" placeholder="Email" />
                <button class="btn btn-info">Submit!</button>
            </form>
        </div>            
    </div>
</div>

Answer 3

col-0 не является допустимым классом в Bootstrap, как вы можете видеть в документации:

https://getbootstrap.com/docs/4.1/layout/grid/