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

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;
}

它在 mobile/xs 上正常工作，无论是小型还是中型，但之后会发生一些奇怪的事情。 div 从屏幕左侧很远的地方开始，当它在桌面上且窗口完全展开时被 chop 。有点像这样:

            ||
        ----||----------------------------------------
 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>

这也没有用。我也在尝试编写“移动优先”的代码!这种行为看起来很奇怪且不一致，所以我不太确定为什么会这样(尤其是对于大屏幕而言)。任何意见，将不胜感激!谢谢。

已解决:我的一位 friend 正在帮助我，并注意到我做错了什么。我忘了调换数字:

<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

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

首先请记住，每个类(class)都会扩大规模，因此您无需明确列出他们在每个规模下应该做什么，只需列出他们在每个转折点应该做什么。过于明确可能会使更改在不同的时间发生。

其次，我在过去看到没有使用所有可用的 12 列会导致一些奇怪的事情发生。在 md 和 lg 大小的屏幕上，您分别使用 9 列和 11 列(总计)。尝试使用相同比例的 12 列。也许尝试类似的东西:

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