Question

目前，我有两个div。窗口完全展开后，我希望它看起来像这样：

----------------------------------------
|   Div-Left |        Div-Right        |
----------------------------------------

当它在移动设备上时，我希望它看起来像这样：

---------------
|  Div-Right  |
---------------
|   Div-Left  |
---------------

我一直在关注这个示例（Bootstrap change div order with pull-right, pull-left on 3 columns和Bootstrap 3: Push/pull columns only on smaller screen sizes），但是我似乎不太正确。我的代码当前看起来像这样（所有代码都在容器内）：

<div class="row">
    <div id="Div-Left" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 col-lg-push-3 col-md-push-3 col-sm-push-6"></div>
    <div id="Div-Right" class="col-lg-8 col-md-6 col-sm-6 col-xs-12 col-lg-pull-8 col-md-pull-6 col-sm-pull-6"></div>
</div>

请注意，Bootstrap中的“行”类为：

.row {
  margin-right: -15px;
  margin-left: -15px;
}

它可以在小到中型的移动设备/ xs上正常工作，但是之后会发生一些奇怪的事情。 div从屏幕左侧很远处开始，并且在桌面完全展开的桌面上被切断。像这样：

            ||
        ----||----------------------------------------
 cut off here|   Div-Left |         Div-Right        |
        ----||----------------------------------------
            ||
        the screen

我也尝试这样做：

<div class="row">
    <div id="Div-Left" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 col-lg-push-3 col-md-push-3 col-sm-push-6"></div>
    <div class="row">
        <div id="Div-Right" class="col-lg-8 col-md-6 col-sm-6 col-xs-12 col-lg-pull-8 col-md-pull-6 col-sm-pull-6"></div>
    </div>
</div>

这也不起作用。我也在尝试编写“针对移动设备优先”的代码！该行为看起来很奇怪并且不一致，所以我不太确定为什么会发生这种情况（尤其是仅对于较大的屏幕）。任何意见，将不胜感激！谢谢。

已解决： ：我的一位朋友在帮助我，注意到我做错了什么。我忘了切换数字：

<div id="Div-Left" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 col-lg-push-8 col-md-push-6 col-sm-push-6"></div>
<div id="Div-Right" class="col-lg-8 col-md-6 col-sm-6 col-xs-12 col-lg-pull-3 col-md-pull-3 col-sm-pull-6"></div>

Answer 1

我认为您遇到的问题有两个方面。

首先请记住，每个类都在扩大，因此您无需明确列出它们在每种大小下应该做的事情，而只是列出它们在每个断点处应该做的事情。过于明确可能会使更改在不同的时间发生。

第二，我在过去看到过，没有使用所有可用的12cols会造成一些怪异现象。在md和lg尺寸的屏幕上，您分别使用9列和11列（总计）。尝试使用相同比例的12色度。也许尝试类似的东西：

<div id="Div-Left" class="col-md-4...
<div id="Div-Right" class="col-md-8...

Bootstrap-调整窗口大小时使用推拉，但屏幕会切断div

1 个答案: