Css 我能创造更多吗；“媒体最小宽度”；Bootstrap 3的案例？

Boostrap 3附带以下功能：

@media (min-width: 1200px)
.container {
    width: 1170px;
}

@media (min-width: 992px)
.container {
    width: 970px;
}

@media (min-width: 768px)
.container {
    width: 750px;
}

我可以自由添加更多最小宽度的案例吗？我应该有什么考虑

---

我想要更多1200像素到1920像素之间的盒子。。。因为在一个1920像素的容器中，我最终得到了一个1170像素的容器，这很糟糕，因为它可能是，比如说，1300px，它不是那么简单。Bootstrap 3附带4个类：

xs（超小型）0-768

sm（小型）768-992

md（中）992-1200

lg（大型）>1200

容器类链接到此类，因此如果您想在此宽度之间有其他步骤，则必须首先添加一个新类，例如：xxs（超小型）0-384（witch目前未在引导中实现），您必须添加以下类：

.col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4,
.col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8,
.col-xxs-9, .col-xxs-10, .col-xxs-11, .col-xxs-12 {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

@media (max-width: 384px) {
    .col-xxs-1,
    .col-xxs-2,
    .col-xxs-3,
    .col-xxs-4,
    .col-xxs-5,
    .col-xxs-6,
    .col-xxs-7,
    .col-xxs-8,
    .col-xxs-9,
    .col-xxs-10,
    .col-xxs-11 {
        float: left;
    }

    .col-xxs-1 {
        width: 8.333333333333332%;
    }

    .col-xxs-2 {
        width: 16.666666666666664%;
    }

    .col-xxs-3 {
        width: 25%;
    }

    .col-xxs-4 {
        width: 33.33333333333333%;
    }

    .col-xxs-5 {
        width: 41.66666666666667%;
    }

    .col-xxs-6 {
        width: 50%;
    }

    .col-xxs-7 {
        width: 58.333333333333336%;
    }

    .col-xxs-8 {
        width: 66.66666666666666%;
    }

    .col-xxs-9 {
        width: 75%;
    }

    .col-xxs-10 {
        width: 83.33333333333334%;
    }

    .col-xxs-11 {
        width: 91.66666666666666%;
    }

    .col-xxs-12 {
        width: 100%;
    }

    .col-xxs-push-1 {
        left: 8.333333333333332%;
    }

    .col-xxs-push-2 {
        left: 16.666666666666664%;
    }

    .col-xxs-push-3 {
        left: 25%;
    }

    .col-xss-push-4 {
        left: 33.33333333333333%;
    }

    .col-xxs-push-5 {
        left: 41.66666666666667%;
    }

    .col-xxs-push-6 {
        left: 50%;
    }

    .col-xxs-push-7 {
        left: 58.333333333333336%;
    }

    .col-xxs-push-8 {
        left: 66.66666666666666%;
    }

    .col-xxs-push-9 {
        left: 75%;
    }

    .col-xxs-push-10 {
       left: 83.33333333333334%;
    }

    .col-xxs-push-11 {
       left: 91.66666666666666%;
    }

    .col-xxs-pull-1 {
        right: 8.333333333333332%;
    }

    .col-xxs-pull-2 {
        right: 16.666666666666664%;
    }

    .col-xxs-pull-3 {
        right: 25%;
    }

    .col-xxs-pull-4 {
        right: 33.33333333333333%;
    }

    .col-xxs-pull-5 {
        right: 41.66666666666667%;
    }

    .col-xxs-pull-6 {
        right: 50%;
    }

    .col-xxs-pull-7 {
        right: 58.333333333333336%;
    }

    .col-xxs-pull-8 {
        right: 66.66666666666666%;
    }

    .col-xxs-pull-9 {
        right: 75%;
    }

    .col-xxs-pull-10 {
        right: 83.33333333333334%;
    }

    .col-xxs-pull-11 {
        right: 91.66666666666666%;
    }

    .col-xxs-offset-1 {
        margin-left: 8.333333333333332%;
    }

    .col-xxs-offset-2 {
        margin-left: 16.666666666666664%;
    }

    .col-xxs-offset-3 {
        margin-left: 25%;
    }

    .col-xxs-offset-4 {
        margin-left: 33.33333333333333%;
    }

    .col-xxs-offset-5 {
        margin-left: 41.66666666666667%;
    }

    .col-xxs-offset-6 {
        margin-left: 50%;
    }

    .col-xxs-offset-7 {
        margin-left: 58.333333333333336%;
    }

    .col-xxs-offset-8 {
        margin-left: 66.66666666666666%;
    }

    .col-xxs-offset-9 {
        margin-left: 75%;
    }

    .col-xxs-offset-10 {
        margin-left: 83.33333333333334%;
    }

    .col-xxs-offset-11 {
        margin-left: 91.66666666666666%;
    }
}    

还有您编写的容器类：

@media (min-width: 384px)
    .container {
        width: 372px;
    }

---

如您所见，它非常复杂，如果您非常想自定义它，建议不要使用引导。当然，您可以创建更多断点等。只要您不更改引导样式表，就不会影响框架

事实上，你需要为320、480、600等等制作案例。。。不止这些

事实上，引导网格只是一个起点。我的意思是，拜托-你可以期待768以下的所有东西都应该遵守一条规则

尽管bootstrap非常全面，但它仍然只是一个起点

我做过很多事情，比如：

@media (max-width:480px) {
  col-xs-4 {
    width: 49.999%;
  }
}

任何告诉你你不需要打一巴掌的人——只要确保测试一下你所做的就行了

---

因为您的示例只针对.container，所以您非常安全。它下所有基于百分比的宽度应按预期工作。

当您需要为容器类使用不同的断点时，您可能会遇到两种情况：

场景1:

你知道临界点。在这种情况下，您可以修改SASS或更少的文件，或者只需在

场景2:

断裂点是可变的。在这种情况下，使用类

.container fluid

。该类可以（通常）与

容器
类一起使用，以便对内部内容进行一些控制，但同样，您可以使用
.semi-container
类创建全屏布局，该类位于
.container
类和屏幕全宽之间。例如：

<div class="container-fluid"><!-- full width -->
   <div class="semi-container container-fluid"><!-- max-width -->
      <div class="container"><!-- container -->
      </div>
   </div>
</div>

虽然这是一个很好的答案，信息也很丰富，但我不认为这与仅仅使用容器液体和做一个快乐的露营者有什么问题有关？如果需要，只需像酷酷的孩子一样设置容器流体：最大宽度：1300pxdo@Fabio谢谢容器流体是我所需要的一切，在我自己的样式表中，我添加了最大宽度（这样在宽监视器中看起来就不会非常宽）。也许你可以把这个贴出来作为答案好吧，我添加了一些解释和代码作为答案：）嗨，我也处于同样的情况，我想我可以使用“@media（最小宽度：1920px）。容器{width:1890px；}”，我也使用场景2正是我所需要的。。。我刚刚忘记了容器fluidy的存在，但看到我添加了半容器类。这是为了防止你需要更多的控制。例如，如果您有多个max width容器流体（我给您的示例中，宽度小于全宽的全宽面板非常常见，但也适用于媒体查询，这只是管理这些div的一个简单技巧：）
.semi-container{max-width:1300px} /* or whatever you need */