个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我在使用 Materialize CSS 时遇到了这个奇怪的问题，其中边栏与“主”面板中的内容以及页脚 (see image here: most content is censored on the page, the "m" in the title is part of the title text "Problem Submission") 重叠，尽管我认为我的网格设置正确。 Chrome 和 Safari 都会发生这种情况(我打赌 IE 也不会有希望)。这是我的文档的基本结构，以下所有标记都在 <body> 中标签(这是一个 Jinja 模板，包含脚本，所有内容都位于“基本”模板中):
<header>
<nav class="top-nav green">
<div class="container">
<a href = "#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"><i class="material-icons">menu</i></a>
</div>
<div class="container">
<div class="nav-wrapper"><span id="logo-container" class="brand-logo">{{ self.title() }}</span></div>
</div>
</nav>
<ul id="nav-mobile" class="side-nav fixed">
<li class="logo"><a id="logo-container" href="/" class="brand-logo">Brand Name</a></li>
<li></li>
<li></li>
<li></li>
{% block navlinks %}
<li class="bold"><a href="/" class="waves-effect waves-teal">Back to Home</a></li>
{% endblock %}
</ul>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12">
{% block jumbo_content %}{% endblock %}
</div>
</div>
<div class="row">
<div class="col s12 m9 l10"><!-- Main content goes here -->
{% block main_content %}
{% endblock %}
</div>
<div class="col hide-on-small-only m3 l2"><!-- Nothing goes here (usually TOC -->
{% block toc_content %}
{% endblock %}
</div>
</div>
</div>
</main>
<footer class="page-footer green" style = "position: -webkit-sticky;">
<div class="container">
<div class="row">
<div class="col l9 m9 s12">
<h5 class="white-text">Brand Name</h5>
<p class="grey-text text-lighten-4">Description</p>
</div>
<div class="col l3 m3 offset-m3">
<h5 class="white-text">Important Links</h5>
<ul>
<li><a class="white-text" href="/login">Login</a></li>
<li><a class="white-text" href="/contact_us">Contact Us</a></li>
<li><a class="white-text" href="/about">About</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Copyright notice
</div>
</div>
</footer>
有没有人遇到过类似的问题，或者有人能指出我的 HTML 布局有问题吗？
最佳答案
如果您检查 side nav documentation并一直滚动到底部，它显示了在使用固定侧边导航时如何偏移内容。
基本上，您只需在整个内容中添加一个 padding。
header, main, footer {
padding-left: 240px;
}
@media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
媒体查询将确保当您的侧导航在较小的屏幕上消失时填充消失。您还可以根据侧边导航的大小调整左侧边距的大小。
关于html - MaterializeCSS 侧边栏显示问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31643950/
24
4
0
我正在使用 materializecss。但是我不能让图标工作它说这个词但不显示图标？ 我包含了 materializecss 和 js 但仍然无法正常工作... 有人知道怎么修这个东西吗？ 最佳答案
与 materializeCSS我试图将一个按钮和一个输入字段放在另一个附近(类似于 default file input )，如下图所示。 但是我很难实现它，因为输入字段标签在按钮上方或字段在按钮下
我正在使用 materializecss 但响应式菜单不起作用？？我从他们的网站上复制了确切的 html，它看起来不错，但是将窗口缩放到较小的尺寸时会出现按钮，但是当我单击它时它不起作用... 最佳答
我尝试了 MaterializeCSS 选择的背景颜色。我试图使用这个问题，但它没有用 Change select box option background color就像常规 HTML 一样(没有
我正在使用来自 materializecss 的日期选择器，我需要禁用所有天，除非星期一，在我使用的其他插件上 'daysOfWeekDisabled'参数，但在这种情况下，我必须使用 disable
这个问题在这里已经有了答案: How to Create Grid/Tile View? [duplicate] (8 个答案) 关闭 6 年前。 比起 Bootstrap，我更喜欢 Materia
我正在使用 materializecss第一次在我的网络应用程序中 我正在努力解决 日期选择器 .它根本不起作用。 我进口的 materialize.css 和 js 文件并使用代码 并添加
我一直在努力让 MaterializeCSS 元素在我的项目中正常工作。 JS 函数都不起作用，我不知道为什么。 这是我的JSFiddle这是行不通的。 据我所知，它是 this one 的精确复制品
我正在使用materializecss我之前工作的菜单之一似乎有一个奇怪的问题。这是它目前正在做的， 底层代码是一个循环。
我正在尝试使用 MaterializeCss 日期选择器表单字段来设置生日。 $('.datepicker').pickadate({ selectMonths: true, // Cre
我正在使用 MaterializeCSS 0.9.8(带有 Angular-materialize 指令)和 Angular 1.5.0 我的目标是在表中生成一些行，每一行都需要具有基本相同的自动完成
我在 Rails 应用程序中使用 materialize-sass gem，但在使用时遇到了一些问题。它仅在根(主页)页面以及其他一些页面中运行良好，但在整个站点上则不然。 .button-colla
我在我的网站上使用 Materializecss，我想在用户按下大 Action 按钮时在较小的 Action 按钮上显示工具提示。 Materializecss 默认仅在悬停时显示工具提示。 有没有
我使用 CSS Materialize 框架，但有一个问题。单击链接时如何关闭左侧移动菜单？默认情况下，仅当您单击菜单外部时，菜单才会关闭。所以我尝试使用函数removeMenu()，但它不起作用。有
我正在尝试在全屏 MaterializeCSS 轮播中设置起始位置。我想将它用作全屏模式内的图库图像查看器。单击图库图像后，模态 打开，图像 slider 应从单击的图像开始。在 Materializ
这不是 this 的副本.不同于 我一直在尝试在网页中包含 MaterializeCSS 轮播，并且我使用的是最新的 MaterializeCSS 文件。除了旋转木马之外，所有其他组件都可以正常工作。
我使用了来自 materializecss modal 的相同示例. 这里的问题是modal在anchor的click事件之前打开。 Specialization Modal Head
我在使用 Materialise CSS 多选框时遇到问题。 我知道需要调用的 javascript 函数 material_select。 JSFiddle Documentation 任何帮助都适
search close 有谁知道当有人在搜索框上写信时如何添加下拉建议？ 使用 Materialise CSS 最佳答案
我有以下侧边导航代码: Last Updated: Text Here Subheader Third Link With Waves 我还有下面的头代码:
我是一名优秀的程序员,十分优秀！