css - moodle:如何更改 bootstrap 主题 'clean' 中的列大小？

Question

我正在尝试更改基于 bootstrap 的 moodle 主题“clean”的列大小。我的 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%。我想我使用了错误的类并覆盖了桌面和移动设计的大小。如果有人知道如何在桌面版本中更改列大小而不在移动版本中覆盖它，那就太好了!

Answer 1

在 Bootstrap 中，所有 span* 元素在 767px 及以下时恢复为 100% 宽度:

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

发生的事情是，您稍后在 CSS 文件中设置这些特定 span 元素的宽度，因此覆盖了将宽度设置为 100% 的 Bootstrap 部分。

为了继续您正在做的事情，答案是确保您在该断点处将宽度重置回 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 的全部意义在于尽可能避免像这样入侵网格。我怀疑您会发现在此处强制使用这些宽度也会对您网站的其他地方产生链式 react 。

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