Twitter bootstrap 引导-仅在小型设备上具有行

Twitter bootstrap 引导-仅在小型设备上具有行,twitter-bootstrap,Twitter Bootstrap,对于我的计划页面,我使用的面板包含每个计划提供的内容 我遇到的问题是,每个面板的大小不同,当您在移动设备上查看时,它看起来如下所示: 我希望它看起来像这样: 但当我这样做时,在大屏幕上看起来是这样的: 如何在小屏幕上实现2列,在大屏幕上实现4列,而不必重复代码,并对行使用隐藏-*和可见-* 以下是此页面的引导程序:尝试以下操作: <div class="row"> <div class="col-xs-12 col-sm-12 col-md-6 col-

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

我遇到的问题是,每个面板的大小不同,当您在移动设备上查看时,它看起来如下所示:



我希望它看起来像这样:


但当我这样做时,在大屏幕上看起来是这样的:

如何在小屏幕上实现2列,在大屏幕上实现4列,而不必重复代码,并对行使用隐藏-*和可见-*


以下是此页面的引导程序:

尝试以下操作:

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

引导层:

希望它对你有用

给你:

我通过将左两个
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>


自由的
终身零元
完全访问

每个月都有新的免费声音
社区支持
豪华的 每月$9.99 一个月30次 一套 19.99美元/月 一个月300个声音 阁楼 199美元/年 无限的
这是一个有点老的问题,已经有了公认的答案;我想要一个更流畅的设计(我的用例与你的不太匹配),所以我想出了一个不同的解决方案,只是想在这里记录下来,供后人使用

引导列基于
float:left
,这就是为什么当列换行且左列高于右列时,会出现奇怪的布局。在这种情况下,如果空间允许,浏览器会在移动到下一行之前尝试将其进一步向右放置

您不想复制列并使用可见/隐藏类,但是还有另一种选择使用可见/隐藏类,利用这些是浮动容器这一事实。CSS具有属性
clear
强制将容器移动到所有浮动容器下方(值
left
将其移动到所有左浮动容器下方、
right
所有右浮动容器下方和
所有浮动容器下方、左或右)。因此,可以在列对之间插入以下内容:

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


您将获得相同的效果,但复杂性较低,尽管可能不是最符合犹太教义的引导方式。

您可以创建代码的演示吗?@ManojKumar我为您添加了一个引导层:)为什么不使用最小高度?谢谢!这正是我想做的。
        <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>
<div class="visible-sm visible-xs" style="clear: both;"></div>