Question

我开始自定义我的引导程序，到目前为止，我有一些与以下模板非常相似的内容：

http://twitter.github.com/bootstrap/examples/fluid.html

但我没有三个span4，而是有四个span3。一旦浏览器达到一定的宽度，我想有三个span3。然后，在另一个宽度，两个span3s。

有没有办法用直接css做到这一点？

Answer 1

您可以简单地将.span3的宽度缩小为媒体查询中.span2的宽度。

/* Bootstrap defaults: */
.span3 {
    width:270px;
}

.span4 {
    width:370px;
}

@media screen and (max-width: 1024px) and (min-width: 767px) {
    /* Decreased span4 size within media query. */
    .span4 {
        width:270px;
    }
    ...
}

Answer 2

这是一种使用jQuery / javascript的方法。 “.colElement”是您想要影响的每个.span *元素。只需调整窗口宽度断点即可满足您的需求。

基于twitter bootstrap 2。*

function arrangeColumns(tile, numColsLG, numColsMED, numColsSM){
    $(tile).removeClass('first');
    var colSize = 0;
    var windowWidth = $(window).width();
    switch(numColsLG) {
        case 2: colSizeLG = 6; break;
        case 3: colSizeLG = 4; break;
        case 4: colSizeLG = 3; break;
        case 5: colSizeLG = 3; break;
        case 6: colSizeLG = 2; break;
    }
    switch(numColsMED) {
        case 2: colSizeMED = 6; break;
        case 3: colSizeMED = 4; break;
        case 4: colSizeMED = 3; break;
        case 5: colSizeMED = 3; break;
        case 6: colSizeMED = 2; break;
    }
    switch(numColsSM) {
        case 2: colSizeSM = 6; break;
        case 3: colSizeSM = 4; break;
        case 4: colSizeSM = 3; break;
        case 5: colSizeSM = 3; break;
        case 6: colSizeSM = 2; break;
    }

    if( windowWidth > 1200){
        $(tile).removeClass('span' + colSizeMED + " " + 'span' + colSizeSM);
        $(tile).addClass('span' + colSizeLG);
        $(tile + ':nth-child('+numColsLG+'n+1)').addClass('first');     
    } else if( windowWidth < 1200 && windowWidth > 900) {
        $(tile).removeClass('span' + colSizeLG + " " + 'span' + colSizeSM);
        $(tile).addClass('span' + colSizeMED);
        $(tile + ':nth-child('+numColsMED+'n+1)').addClass('first');        
    } else {
        $(tile).removeClass('span' + colSizeLG + " " + 'span' + colSizeMED);
        $(tile).addClass('span' + colSizeSM);
        $(tile + ':nth-child('+numColsSM+'n+1)').addClass('first');     
    }
}       


/* Initialize */
arrangeColumns('.colElement', 3, 2, 2);
/* Call on window resize  */
$(window).resize(function() {
    arrangeColumns('.colElement', 3, 2, 2);
});

Answer 3

我最近需要这个原型。我可以想到三个肮脏的解决方案，它们都不是非常完美，足以让我在生产代码中实现。但是，如果您需要简单的静态网站或使用原型演示某些东西，它们都可以正常工作。

编码两个方案。一个有4列，另一个有3列。使用@media查询隐藏/显示所需的一个。（使用bootstrap中的实用程序类）。
与no相似。 1但不那么凌乱。而不是编码两个不同的场景 - 动态更改HTML标记。放一个简单的JS / Jquery脚本，它将删除某些类并在特定宽度上添加新类。您可能需要销毁一些[div class =“row”]并动态创建新的以实现连续不同数量的项目。
忽略此部分的网格（如果可以）并对您的项目进行硬编码。你可以修改它们的宽度，这样当它们没有足够的空间时，它们就会开始进入新行，或者只使用百分比并使用@media查询硬编码特定的宽度。您始终可以使用所有列并将硬编码的项目放在一行中（例如，将所有12列用作容器）。
奖励 - 使用同位素（http://mpezzi.github.io/bootstrap_isotope/）或Mansonry http://masonry.desandro.com/来达到您的效果。

在我希望显示的特定断点处控制一行中有多少项是很好的，但这需要重新考虑引导程序...也许他们会弄明白并添加为附加组件或某事......目前我甚至无法想到这对于bootstrap默认类是如何工作的......

Answer 4

据我所知，你要求Bootsrap，但Zurb Foundation有这样的内置功能

<div class="row">
  <div class="small-4 medium-6 large-12 columns">
  </div>
  <div class="small-8 medium-6 columns">
  </div>
</div>

这样做可以为小型设备创建2列4和8列，为中型设备创建2列6列，在大屏幕上创建12列1个全宽列。如果你想在屏幕尺寸上保持相同的布局，只需要小*列，它将用于中型和大型媒体查询

自定义引导程序 - 如何更改特定宽度下的列数？

4 个答案: