Bootstrap3：移动优先方法，防止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>

这将适用：

{li> col-12 xs尺寸 {li> col-6 sm尺寸 {li> col-3 lg尺寸
• 等......

有关文档的更多信息：

• Bootstrap grid
• Bootstrap grid example for mixing sizes

Answer 2

我正在为您提供完整的媒体查询 - 您可以使用min-width only or min and max-width together or max-width only。

包含所有三种组合的示例

    @media (min-width: 1200px) {

    }


@media (min-width: 992px) and (max-width: 1199px) {

}


@media (min-width: 768px) and (max-width: 991px) {

  }


 @media (max-width: 767px) {

 }


  @media (max-width: 480px) {

  }

现在，bootstrap 3使用以下断点进行移动优先 -

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px){

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px){

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px){

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px){

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px){

}