css - Bootstrap3 : mobile first approach, 阻止 xs 规则应用于更大的屏幕尺寸

Question

我使用 Bootstrap 3.3 并使用移动优先方法进行创作。这是 css:

       .link{
            display: block;
            margin: 7px auto;
            text-align: center;

            /*Tablets+ only*/
            @media(min-width: 768px){
                float: right;
                position: relative;
                top: 10px;  }

在上面，除了一些附加属性之外，移动设备 (xs) 尺寸的属性也将应用于平板电脑 + 尺寸。编写上述内容的最佳方式是什么，这样手机的属性就不会应用于平板电脑+尺寸？

Answer 1

除了 css 代码，我们还需要您应用类的 html 的标记。
但是对于一般规则，您可以为不同的大小设置多个类，例如:

<div class="col-xs-12 col-sm-6 col-lg-3">
    some content...
</div>

这将适用:

• col-12 xs 尺寸
• col-6 sm 尺寸
• col-3 为 lg 尺寸
• 等等...

关于文档的更多信息:

• > Bootstrap grid
• > Bootstrap grid example for mixing sizes