我可以为Bootstrap 3创建更多的“媒体最小宽度”情况吗？

问题描述：

自举3自带了这一点：我可以为Bootstrap 3创建更多的“媒体最小宽度”情况吗？

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

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

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

我可以*地添加更多的最小宽度的情况下？我应该考虑什么？

我想拥有1200像素，并说，1920px之间更多的情况......因为在1920px我最终的1170px的容器和吮吸，因为它可能会，比方说，1300px

有什么错只是使用容器流体，是一个快乐的人？如果需要的话，只需设置'容器流体：最大宽度：1300px'就像凉爽的孩子们一样 – Devin 2014-09-29 00:19:15

@Fabio谢谢！容器流体是我所需要的，并且在我自己的样式表中，我添加了最大宽度（因此它在宽屏幕上看起来并不是很宽）。也许你可以发布这个作为答案 – sports 2014-09-29 02:38:30

好吧，我添加它作为答案与一些解释和代码:) – Devin 2014-09-29 04:37:51

答

当你需要使用不同的突破点container类，你可能会面临2种情况：

方案1：

你知道的突破点。在这种情况下，您可以修改SASS或LESS文件，或只是在http://getbootstrap.com/customize/#container-sizes

方案2创建一个定制版本：

的突破点是可变的。在这种情况下，您使用类.container-fluid。这个类可以（并且通常）与container类一起使用，以便对内部内容进行一些控制，但是同样的方式，您可以创建一个.semi-container类的全屏布局，该类是.container类和全宽的屏幕。例如：

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

，然后.semi-container的CSS将

.semi-container{max-width:1300px} /* or whatever you need */

情况2正是什么我需要......我刚刚忘记了容器流体的存在 – sports 2014-09-29 04:41:03

是的，我想，但看到我添加了半容器类。那是在你需要更多控制的情况下。例如，如果您有多个最大宽度容器流体（全宽面板宽度小于全宽示例，我给你的例子很常见，但也适用于媒体查询，这只是一个简单的技巧来管理那些div :) – Devin 2014-09-29 04:43:54

答

它并不像就那么简单。自举3带有4类：

XS（额外小）0-768
SM（小）768-992
MD（中）992-1200
LG（大）> 1200

而容器类是链接到这个类，所以如果你想有这个宽度之间的其他步骤，你必须开始添加一个新的类，例如：xxs（超小额外）0-384（女巫是现在不在bootstrap中实现），你必须添加这个类：

.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; 
    }

正如你所看到的，这是非常复杂的，它的recomanded如果你想定制它非常非常不使用引导。

虽然这是一个伟大的答案和非常丰富，我不认为它与问题 – Devin 2014-09-29 00:17:22

答

当然，你可以创建更多的断点等。只要你不改变引导样式表，它不会影响框架。

在现实中，你需要为320,480,600等案例......不止这些。

事实上，自举网格只是一个起点。我的意思是，来吧 - 你可以期望768以下的所有东西都值得一个规则。

尽管它很全面，bootstrap仍然只是一个起点。

我已经做吨的东西，如：

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

任何人谁告诉你，你不能需要一巴掌 - 只要确保测试你做了什么。

既然你的例子只针对.container，你是非常安全的。它下面的所有基于百分比的宽度应该按预期工作。

我可以为Bootstrap 3创建更多的“媒体最小宽度”情况吗？

相关推荐