代码之家 › 专栏 › 技术社区 › treyBake user1850175

bootstrap 3移动设备上div的移动位置

media-queries twitter-bootstrap-3 css

treyBake user1850175 · 技术社区 · 8 年前

所以根据这个: https://getbootstrap.com/docs/3.3/css/#grid-column-ordering 我应该可以根据视区交换div的位置。

我试过使用下面的html(它是twig-but应该没什么区别):

    <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是真正的伊西尔多的祸根)

1 回复 | 直到 8 年前

Dexter0015 8 年前

我相信你的问题在于bootstrap是一个移动优先的框架,你试图将它作为桌面优先的框架。

您应该按照希望在手机上显示div的方式放置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 )和一条规则来拉动左边的第二列( .col-sm-pull-6型 )

只要你没有特定于超级宽度的规则(又称:“md”和“lg”),那么“sm”规则将在更大的屏幕上使用。