Question

我有一个带有两列的bootstrap 4 jumbotron，因此，我希望第二列在小屏幕中首先出现。这是我的代码。但这行不通。我在做什么错

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-8 order-xs-2">
                <h1>Welcome</h1>
                <p class="lead">This is my site</p>
                <p><a class="btn btn-primary btn-lg" href="{% url 'login' %}" role="button">Login &raquo;</a></p>
            </div>
            <div class="col-md-4 order-xs-1">
                This should be the first column on small screens
            </div>
         </div>
    </div>
</div>

Answer 1

阅读migration section in the docs。 -xs缀在Bootstrap 4中不再使用

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-8 order-2 order-md-1">
                <h1>Welcome</h1>
                <p class="lead">This is my site</p>
                <p><a class="btn btn-primary btn-lg" href="{% url 'login' %}" role="button">Login &raquo;</a></p>
            </div>
            <div class="col-md-4 order-1">
                This should be the first column on small screens
            </div>
         </div>
    </div>
</div>

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

Bootstrap 4的jumbotron列排序-Order-XS-不起作用

1 个答案: