css - Bootstrap 3移动div在移动设备上的位置

Question

所以根据这个:https://getbootstrap.com/docs/3.3/css/#grid-column-ordering我应该能够根据视口(viewport)交换 div 的位置。

我尝试使用以下 html(它是 Twig - 但这应该没有什么区别):

    <div class="row">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6 col-xs-12 col-xs-push-12" id="recommend-container">
                    <h1>
                        <i class="fas fa-chess-king"></i>
                        Solomon
                    </h1>

                    <hr />

                    <div id="recommend-contents">
                        <p>Solomon Recommends:</p>

                        {% for type,recommend in recommendations %}
                            <h3>{{ type }}</h3>

                            <ul>
                                {% for index,name in recommend %}
                                    <li>{{ name }}</li>
                                {% endfor %}
                            </ul>
                        {% endfor %}
                    </div>
                </div>

                <div class="col-md-6 col-xs-12 col-xs-pull-12" id="register-section-container">
                    <h1>Register</h1>
                    <hr />

                    {{ form_start(form) }}
                        {{ form_row(form.username, { 'attr': {'class': 'form-control login-input', 'placeholder': 'username'} }) }}
                        {{ form_row(form.email, { 'attr': {'class': 'form-control login-input', 'placeholder': 'email'} }) }}
                        {{ form_row(form.plainPassword.first, { 'attr': {'class': 'form-control login-input', 'placeholder': 'password'} }) }}
                        {{ form_row(form.plainPassword.second, { 'attr': {'class': 'form-control login-input', 'placeholder': 'retype password'} }) }}

                        <div class="register-btn-container">
                            <button class="btn btn-primary d-inline-block" type="submit">
                                <i class="fas fa-check"></i>
                                Register
                            </button>

                            <p class="d-inline-block">Already signed up? <a href="/login">Login</a></p>
                        </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>

这不仅在移动设备上不起作用，而且在桌面 View 上的 div 之间创建了一个奇怪的空间？我真的不明白它的逻辑，我该如何调试或修复？ (CSS 才是真正的 Isildur 的克星)

Answer 1

我认为您的问题是因为 Bootstrap 是移动优先框架，而您尝试将其用作桌面优先框架。

您应该按照您希望它们在移动设备上显示的方式放置 div，然后在大屏幕上拉/推它们:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
 <div class="container-fluid">
    <div class="row">
        <!-- LEFT ON DESKTOP -->
        <div class="col-xs-12 col-sm-6 col-sm-push-6" id="recommend-container">
        I'm on the right on desktop
        </div>
        <!-- RIGHT ON DESKTOP -->
        <div class="col-xs-12 col-sm-6 col-sm-pull-6" id="register-section-container">
        I'm on the left on desktop
        </div>
    </div>
</div>

这是将附加的内容:

在移动设备上(视口(viewport)宽度低于 768 像素):应用 .col-xs-12 规则，因此 div 应按照与代码相同的顺序显示在彼此之上。

然后当您达到 768px 宽度(及以上)时:应用 .col-sm-6 规则，因此您应该将两列并排显示，因为每列设置为占用 1/2 个可用空间(准确地说是 6/12 :))。当你想“反转”列的“逻辑”顺序时，你添加了一个规则将第一列推到右边 (.col-sm-pull-6)，还有一个规则将第二列拉到左边 (.col-sm-pull-6)。

只要您没有特定于 super 宽度的规则(又名:“md”和“lg”)，“sm”规则将用于更大的屏幕。