Question

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

＆＃13;

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

＆＃13;

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

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

Boostrap 4超小col宽100％不工作

1 个答案: