Question

对于我的计划页面，我使用的面板包含每个计划提供的内容。

我遇到的问题是因为每个面板的大小不同，当您在移动设备上查看时，它看起来像这样：

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 1 --> </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 2 --> </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 3 --> </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 4 --> </div>
    </div>
</div>

我希望它看起来像这样：

<!-- This is how I attempted to do it -->
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 1 --> </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 2 --> </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 3 --> </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 4 --> </div>
    </div>
</div>

但是当我这样做时，它在大屏幕上看起来像这样：

如何在不重复我的代码的情况下实现2个小屏幕和4个大屏幕，并为行使用hidden- *和visible- *？

以下是此页面的动态内容：http://www.bootply.com/POHPsCRmmM

Answer 1

你走了：

Bootply

我通过将左侧两个div元素和右侧两个div元素分别放在各自的容器中来实现它。然后我使用col-lg，col-md和col-sm的组合来达到您想要的效果：

        <div class="letter-space">
            <div class="row">
              <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center text-center">
                  <div class="panel panel-default">
                        <div class="panel-heading purple">
                            <h1 class="panel-title fat">Free</h1>
                            <small>$0 <i>for life</i></small>
                        </div>
                        <div class="panel-body grey">
                            Full access
                            <hr class="hr-line">
                            New free sounds every month
                            <hr class="hr-line">
                            <div class="click" tooltips="" tooltip-html="<center><strong>Free support in our forums</strong> <br> support.resonanceinn.com</center>" tooltip-size="small">
                                <span>Community Support</span>
                            </div>
                            <hr class="hr-line">
                            <a class="btn btn-primary-white btn-lrg btn-block margin-top" href="/register">Free</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center text-center">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h1 class="panel-title fat letter-space">Deluxe</h1>
                            <small>$9.99 / <i>month</i></small>
                        </div>
                        <div class="panel-body">
                            30 sounds a month
                        </div>
                    </div>
                </div>
              </div>


         <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h1 class="panel-title fat letter-space">Suite</h1>
                            <small>$19.99 / <i>month</i></small>
                        </div>
                        <div class="panel-body">
                            300 Sounds a month
                        </div>
                    </div>
                </div>


                <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h1 class="panel-title fat letter-space">Penthouse</h1>
                            <small>$199 / <i>year</i></small>
                        </div>
                        <div class="panel-body">
                            Unlimited
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>
    </div>

Answer 2

尝试这样的事情：

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="panel"> <!-- Panel 1 --> </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="panel"> <!-- Panel 2 --> </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="panel"> <!-- Panel 3 --> </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="panel"> <!-- Panel 4 --> </div>
        </div>
    </div>
</div>

bootply：http://www.bootply.com/G9NGCPoOKe

希望它适合你！

Answer 3

这是一个有点老问题，它已经有了一个公认的答案;我想要更流畅的设计（我的用例并不真正与你的匹配）所以我提出了一个不同的解决方案，只是想在这里为后代录制。

Bootstrap列基于float: left，这就是为什么当列换行并且左列高于右列时，您将获得奇怪的布局。在这种情况下，如果空间允许，浏览器会尝试将其放置得更右，然后再将其移动到下一行。

你不想复制你的列并使用可见/隐藏类，但是有另一种选择使用可见/隐藏类来利用这些是浮动容器的事实。 CSS具有属性clear以强制容器移动到所有浮动容器下方（值left将其移动到所有左浮动的下方，right移动到所有浮动容器下方both低于所有浮动，左或右）。因此，您可以在列对之间插入以下内容：

<div class="visible-sm visible-xs" style="clear: both;"></div>

你会得到同样的效果，但复杂性较低，尽管可能不是最犹豫的引导方式。

Bootstrap - 仅在小型设备上有行

3 个答案: