Question

我有这个div：

<div class="col-lg-6 col-md-6 col-sm-6">
    <p class="btn-toolbar pull-right">Some Content</p>
</div>

我想知道当页面处于平板电脑模式时是否可能（例如col-md-6）我想要更改段落类而不是拉向右我想设置为左拉。

有可能吗？

谢谢，Laziale

Answer 1

是的，您需要在css中使用media queries来设置不同的规则。如果您希望col-lg-6具有相同的效果，则只需在col-md-6

的媒体查询中对其进行定义

请注意，您只需要在HTML中定义col-sm-6，因为它首先是移动设备，较大的尺寸也会跟随。您只需要在需要更改时指定较大的值

Answer 2

是的，但是我能看到你这么做而没有弄乱媒体查询的唯一方法就是基本上复制你的所有HTML并将不同的类应用到你拥有的每一组“代码”中。

对于要在手机上显示的HTML，您可能需要

<div class="col-lg-6 col-md-6 col-sm-6 visible-xs">
                             <p class="btn-toolbar pull-right">
                 Some Content
                    </p>
                            </div>

对于平板电脑？

<div class="col-lg-6 col-md-6 col-sm-6 visible-md">
                             <p class="btn-toolbar pull-left">
                 Some Content
                    </p>
                            </div>

可能不是超级高效，但这样您就可以绝对控制在给定设备上加载的网站的任何“版本”的每个细节。

Answer 3

你可以在平板电脑或屏幕尺寸以上覆盖右拉吗？这避免了如前所述将内容分成两个div。我同意，代码拆分使Bootstrap的使用无效，并添加了冗余代码，随着内容随着时间的推移而变得非常难以管理。

@media all and (min-width: 768px) and (max-width: 1200px) {
     p.btn-toolbar.pull-right {
           float:     left !important;
     }
}

在平板电脑或手机视口中，类之间的Bootstrap切换

3 个答案: