Bootstrap 4 extra small col width 100% 不工作答案

【问题标题】：Boostrap 4 extra small col width 100% not workingBootstrap 4 extra small col width 100% 不工作
【发布时间】：2018-09-22 13:30:13
【问题描述】：

我使用 Bootstrap 4 开发了一个静态 HTML 页面，使用 col 与大屏幕相等，但在 Extra small 屏幕上，col 没有得到 100% width。我忘记了什么？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div class="container">
     <div class="form-row">
        <!-- Grid column -->
        <div class="col col-6">
            <!-- Material input -->
            <div class="md-form">
                <input type="text" class="form-control" placeholder="City">
            </div>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col">
            <!-- Material input -->
            <div class="md-form">
                <input type="text" class="form-control" placeholder="State">
            </div>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col">
            <!-- Material input -->
            <div class="md-form">
                <input type="text" class="form-control" placeholder="Zip">
            </div>
        </div>
        <!-- Grid column -->
    </div>
    </div>

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 bootstrap-grid

【解决方案1】：

超小的 col 宽度 100% 不起作用

列的宽度不是 100%，因为col 是最小的xs 屏幕尺寸的auto-layout column，因此列将继续缩小宽度，并且永远不会垂直堆叠。

只需使用 col-sm 代替...

https://www.codeply.com/go/xb7WffaSmS

<div class="container">
    <div class="form-row">
        <!-- Grid column -->
        <div class="col-sm-6">
            <!-- Material input -->
            <div class="md-form">
                <input type="text" class="form-control" placeholder="City">
            </div>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-sm">
            <!-- Material input -->
            <div class="md-form">
                <input type="text" class="form-control" placeholder="State">
            </div>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-sm">
            <!-- Material input -->
            <div class="md-form">
                <input type="text" class="form-control" placeholder="Zip">
            </div>
        </div>
        <!-- Grid column -->
    </div>
</div>

另请注意，-xs 中缀已在 Bootstrap 4 中删除。现在最小的类是简单的 col、col-6、col-12 等...

【讨论】：