列大小在引导程序 4 中不起作用答案

【问题标题】：Column sizing is not working in bootstrap 4列大小在引导程序 4 中不起作用
【发布时间】：2019-03-16 17:36:49
【问题描述】：

我正在尝试让表单输入填满小型设备上的屏幕宽度。但它不起作用。它在更大的屏幕上确实可以正常工作，但在手机上却无法响应。

<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>

【问题讨论】：

我不明白问题/问题是什么。表单输入在 sm 屏幕上是全宽的：codeply.com/go/dxui9n2nwa 另外，Bootstrap 中没有 col-0 类。
@Zim 的想法是我希望输入组居中，如果在手机上查看，我希望它是屏幕的全宽
这正是它现在的工作方式。你看过codeply吗？

标签： html bootstrap-4 responsive col

【解决方案1】：

col-0 不是 Bootstrap 中的有效类，您可以在文档中看到：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

我确实在文档之前检查过 col-* 是一个有效的类

【讨论】：