Question

我正在尝试更改基于bootstrap的moodle主题'clean'的列大小。我的Moodle使用三列布局。左列和右列太宽，我想让它们更窄，以便中间的列可以显示得更宽。 Moodle在管理界面中提供了一个textarea来添加自己的CSS代码。我添加了以下代码：

    .row-fluid .span9 { 
    width: 80.0%;
    }
    .row-fluid .span8 { 
    width: 80.0%;
    }
    .row-fluid .span3 { 
    width: 15.0%;
    }
    .row-fluid .span4 { 
    width: 15.0%;
    }

在桌面屏幕上看起来都很好，但是如果我缩小浏览器窗口以模拟智能手机分辨率它就不起作用。左列和右列像它们应该移动到底部，但不使用屏幕的整个宽度，而是在设置中定义的15％i。我想我正在使用错误的类并覆盖桌面和移动设计的大小。如果有人知道如何更改桌面版本中的列大小而不在移动版本中覆盖它，那就太棒了！

Answer 1

在Bootstrap中，所有span*元素在767px及以下和以下都恢复为100％宽度：

http://getbootstrap.com/2.3.2/scaffolding.html#responsive

发生的事情是你要在CSS文件中稍后设置这些特定span元素的宽度，从而覆盖Bootstrap的部分，将宽度设置为100％。

要继续您的工作，答案是确保在该断点处将宽度重置为100％：

.row-fluid .span9 { 
    width: 80.0%;
}
.row-fluid .span8 { 
    width: 80.0%;
}
.row-fluid .span3 { 
    width: 15.0%;
}
.row-fluid .span4 { 
    width: 15.0%;
}

/* set back to 100% for smaller screens */
@media (max-width: 767px) {
    .row-fluid .span9,
    .row-fluid .span8,
    .row-fluid .span3,
    .row-fluid .span4 { 
        width: 100%;
    }
}

正如对你的另一个评论：Bootstrap的全部意义在于尽可能避免像这样侵入网格。我怀疑你会发现强迫这些宽度也会在你网站的其他地方产生连锁反应。

每个“跨度”相当于宽度的大约6％（不考虑每个之间的边距），因此更好地回答您的要求是编辑页面标记。如果您当前正在使用.span4和.span3并随后将其强制为15％，则可以将这些更改为.span2，这与您当前强制的15％宽度大致相同。然后调整落在该行内的其他跨度元素以占据空白区域。

Answer 2

我确实尝试增加Middle列的宽度，以便我们可以在不滚动的情况下查看内容。为此我们不需要编写任何编码。只需转到“主题设置”然后转到“主题设计器模式”并检查该框，以便我们可以为自己的主题。然后转到“主题选择器”，然后“清除主题兑现”，然后单击“更改主题”。

moodle：如何在bootstrap主题中更改列大小＆＃39; clean＆＃39;？

2 个答案: