连续多个col-md-9和一个col-md-3

时间:2019-07-03 19:05:24

标签: html css twitter-bootstrap

我正在使用Bootstrap 4创建主题。我一度陷入困境。我创建了5个不同的部分。每个部分可以单独设置大小。用户可以选择截面宽度9/12或12/12。如果宽度设置为9/12,则右侧会自动附带一个侧边栏。我在这里有问题。

当一个以上宽度为9/12的部分到达底部时,侧边栏位于最后一个部分的右侧。

我可以直观地表示为:

当前存在问题的情况:https://i.stack.imgur.com/serlN.png

我要:https://i.stack.imgur.com/fFDqm.png

我的代码是:

<div class="row">
  <div class="col-md-9"></div>
  <div class="col-md-9"></div>
  <div class="col-md-9"></div>
  <div class="col-md-3"></div>
</div>

我知道我可以这样做:

<div class="row">
    <div class="col-md-9">
        <div class="row">
            <div class="col-md-12"></div>
            <div class="col-md-12"></div>
            <div class="col-md-12"></div>
        </div>
    </div>
    <div class="col-md-3"></div>
</div>

但是,当用户选择第一部分的宽度为12/12时,我希望边栏下降。像这样:

示例1:https://i.stack.imgur.com/STf8X.png

Example2:https://i.stack.imgur.com/dgnP2.png

有人知道该怎么做吗?谢谢大家!

0 个答案:

没有答案