Question

所以根据这个：https://getbootstrap.com/docs/3.3/css/#grid-column-ordering我应该能够根据视口交换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>

这不仅不适用于移动设备，而且在桌面视图上的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>

以下是附加内容：

在移动设备上（768px宽度以下的视口）：.col-xs-12规则适用，因此div应以与代码相同的顺序显示在彼此之上。

然后当您达到768px宽度（及以上）时：.col-sm-6规则适用，因此您应该并排显示两列，因为每列设置为占用可用空间的1/2（6 / 12准确:)）。并且，当您想要“反转”列的“逻辑”顺序时，您可以添加一个规则来推送右侧的第一列（.col-sm-pull-6），并添加一个规则来拉动左侧的第二列（{ {1}}）。

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

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

1 个答案: