Question

我需要为每个设备分配相当不同的内容。

碰巧与this one几乎完全相同的问题。但是demo from the selected response并不适合这个问题。

情况：以下是我想要查看xs设备的内容的方法： enter image description here

以下是我想看到sm设备的内容： enter image description here

对于md和其他我需要看到

A，B，C 在同一行。

demo from the selected response中显示了我遇到的问题以及this fiddle未解决的问题。

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-9 col-sm-push-3 col-md-3 col-md-push-9">
            <div style="color:red">A<br>A<br>A</div>
        </div>
        <div class="col-xs-12 col-sm-3 col-sm-pull-9 col-md-3 col-md-pull-3">
            <div style="color:blue">B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br></div>
        </div>
        <div class="col-xs-12 col-sm-9 col-sm-offset-3 col-md-6 col-md-offset-0 col-md-pull-3">
            <div style="color:green">C<br>C<br>C<br>C<br>C<br>C<br>C<br>C<br></div>
        </div>
    </div>
</div>

在sm设备中，来自B的内容非常高;所以我在A内容和C内容之间存在垂直差距。

sm output

我希望A内容和C内容像在同一列中一样，没有垂直间隙。

根据我的要求，小提琴中xs和md的分布是正确的。

我不知道如何设置xs（来自小提琴），sm（作为axplained）和md（来自小提琴）发行版的引导程序。

感谢您的帮助。

Answer 1

我搞砸了这些段落，但是这个段落空间较小并且工作正常，即使它可能不是最好的方法但是现在解决了这个问题：

<div class="container">
            <div class="row">
                <div class="col-sm-6 col-xs-12 col-md-4">
                    <div style="color:red" class="col-sm-12 col-xs-12 col-md-12">A<br>A<br>A</div>
                </div>
                <div class="col-sm-6 col-xs-12 col-md-8">
                    <div style="color:blue" class="col-sm-12 col-xs-12 col-md-4">B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br></div>
                    <div style="color:green" class="col-sm-12 col-xs-12 col-md-4">C<br>C<br>C<br>C<br>C<br>C<br>C<br>C<br></div>
                </div>
            </div>
</div>

Answer 2

创建一个仅float:right触发sm的自定义类，如下所示：

@media (min-width: 768px) and (max-width: 991px)
{
.col-sm-pull-right{
    float:right;
  }
}

并将其应用于A和C div。

DEMO：http://www.bootply.com/Oc3cVJN8V3

ps - 我很惊讶这样的课程在Bootstrap中并不存在，但也许有充分的理由！

列的排序和固定间隙

2 个答案: