腾讯云

开发者社区

文档建议反馈控制台

首页

文章/答案/技术大牛

发布

社区首页 >问答首页 >Twitter引导网格:是否可以通过向容器中添加类来模拟较小的屏幕？

问Twitter引导网格:是否可以通过向容器中添加类来模拟较小的屏幕？
EN

Stack Overflow用户

提问于 2014-07-18 14:06:02

回答 3查看 2.7K关注 0票数 5

3是否通过向网格容器中添加一个css类来“模拟”一个较小的屏幕？

我的用例是，我希望通常在大屏幕上使用引导程序的网格显示一段html，但我希望重用相同的片段，以便在一个模式中显示(这要窄得多)。例如，假设我有这个html：

<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-12">One</div>
        <div class="col-md-6 col-sm-12">Two</div>
    </div>
</div>

是否有一个内置类可以添加到.container元素(如.simulate-sm)中，以强制使用sm网格定义显示列，即使它在md屏幕上？上面的html只是一个例子:我的真实世界html有大量行和更多不同的列组合，这使我对尝试单独处理列类犹豫不决。

谢谢你的帮忙!

css

twitter-bootstrap

twitter-bootstrap-3

grid-layout

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-07-18 19:30:35

没有内置的东西，但是使用正确的CSS (包括子类)，您可以让一个添加的自定义类为您完成所有的工作。在您的具体示例中，您将向. specific div添加..modal，如下所示：

<div class="modal-body simulate-sm">      
    <div class="col-md-6 col-sm-12">One</div>
....

以及一些定制的CSS：

.simulate-sm .col-sm-12{width:100%}
.simulate-sm .col-sm-8{width:75%}
.simulate-sm .col-sm-6{width:50%}
.simulate-sm .col-sm-4{width:25%} /* extrapolate as needed */

无论您在原始代码中使用了什么列类，都要这样做，做基本的数学运算来计算%宽度。(即与Bootstrap‘s相同)。

后代特性的结合以及在模态体上使用这种特性，意味着它仅在一个模式内(您已经添加了..simulate*类)覆盖Bootstrap的样式。

这里有一个例子： http://www.bootply.com/KhNbrdUzoE

票数 4

Stack Overflow用户

发布于 2014-07-18 16:46:06

我无法很好地想象您的问题，而且我从未亲自这么做过，但我觉得文档中的这个片段与您的需要相关：

网格类应用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。因此，对一个元素应用任何. class类不仅会影响它在中型设备上的样式，而且在不存在一个. class类的大型设备上也会影响它的样式。

如果您删除了col-md-6类定义，听起来像class 12定义将对所有等于或大于小屏幕的形式因素生效。

如果答案与此无关，请道歉。完全是在黑暗中拍摄的。

票数 0

Stack Overflow用户

发布于 2014-07-18 17:10:55

如果你想模仿移动设备上的样子，大多数浏览器都有仿真器。例如，在chrome中，您将检查一个元素，并且控制台附近的底部有一个模拟器选项。在模仿一个比你的屏幕“大”的屏幕方面，有些网站允许你从不同的分辨率上查看你的网页。通过快速的google搜索，这里有一个模拟器：http://quirktools.com/screenfly/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24834498

复制

Sqlserver查询数据表中的字段类型

select a.name 表名, b.name 字段名, case c.name when 'numeric' then 'numeric(' + convert(varchar,b.length) + '，' + convert(varchar,b.xscale) + ')' when 'char' then 'char(' + convert(varchar,b.length) + ')' when 'varchar' then 'varchar(' + convert(varchar,b.l

静谧的小码农

2019/04/25

4.2K0