moodle：如何更改引导主题“干净”中的列大小？答案

【问题标题】：moodle: how to change the column size in bootstrap theme 'clean'?moodle：如何更改引导主题“干净”中的列大小？
【发布时间】：2017-06-30 20:44:38
【问题描述】：

我正在尝试更改基于引导程序的 moodle 主题“干净”的列大小。我的 Moodle 使用三列布局。左右两列太宽，我想让它们更窄，这样中间的列可以显示得更宽。 Moodle 在管理界面中提供了一个文本区域来添加您自己的 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%。我想我使用了错误的类并覆盖了桌面和移动设计的大小。如果有人知道如何在桌面版本中更改列大小而不在移动版本中覆盖它，那就太好了！

【问题讨论】：

标签： css twitter-bootstrap themes moodle

【解决方案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% 宽度大致相同。然后调整该行内的其他 span 元素以占据空白区域。

【讨论】：

您好 johnkavanagh，非常感谢您的回复。我试过你的代码，它有效！我在 iPad 1、Galaxy Ace 和 Galaxy S3 上测试了从 1024x768 到 1920x1080 的桌面分辨率。结果总是看起来不错

【解决方案2】：

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

【讨论】：