Boostrap 4 очень маленькая ширина столбца 100% не работает

Я разработал статическую HTML-страницу с Bootstrap 4, используя col, равный большому экрану, но на экранах Extra small столбец не получает 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
person Lalji Tadhani    schedule 12.04.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Очень маленькая ширина столбца 100% не работает

Ширина столбцов не равна 100 %, поскольку col – это автоматический макет столбца для наименьшего размера экрана xs, поэтому столбцы будут продолжать уменьшаться по ширине и никогда не будут складываться вертикально.

Просто используйте вместо этого 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 и т. д.

person Zim    schedule 12.04.2018