1

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

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

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

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

4

4 回答 4

1

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

/* 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;
    }
    ...
}
于 2013-03-21T18:59:42.373 回答
0

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

基于 twitter 引导程序 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);
});
于 2013-10-06T15:00:21.103 回答
0

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

  1. 编写两个场景。一个有 4 列，另一个有 3 列。使用@media 查询隐藏/显示所需的一项。（使用引导程序中的实用程序类）。

  2. 类似于没有。1 但不那么凌乱。而不是编写两个不同的场景 - 动态更改 HTML 标记。放置一个简单的 JS/Jquery 脚本，它将删除一些类并在特定宽度上添加新的类。您可能需要销毁一些 [div class="row"] 并动态创建新的，以连续获得不同数量的项目。

  3. 忽略此部分的网格（如果可以）并硬编码您的项目。您可以修复它们的宽度，因此当空间不足时，它们将开始换行，或者仅使用百分比和硬编码特定宽度与 @media 查询。您始终可以使用所有列并将硬编码的项目放在一行中（例如，使用所有 12 列作为容器）。

  4. 奖励 - 使用同位素 ( http://mpezzi.github.io/bootstrap_isotope/ ) 或 Mansonry http://masonry.desandro.com/来实现你的效果。

如果能够控制我想显示的特定断点处连续有多少项目，那就太好了，但这需要重新考虑引导程序......也许他们会弄清楚并添加为附加组件或其他东西.. . 目前我什至无法想到这如何与引导默认类一起工作......

于 2014-01-14T16:58:01.730 回答
0

我了解您要求使用 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 列，在大屏幕上创建 1 个 12 列全宽列。如果您想在屏幕尺寸上保持相同的布局，只需 small-* 列，它将用于中型和大型媒体查询

于 2015-10-27T00:57:43.873 回答