我正在开发自己的 octopress 主题，所以我想修改标题 可以在浏览器中使用 100% 的宽度。我将其添加到“_styles.scss”:
header[role="banner"] {
background-image: url(/images/header-bg.png);
background-repeat: repeat;
position:relative;
width: 100%;
}
但我得到的只是这个结果:
这是默认布局的 default.html 中的条目。
{% capture root_url %}{{ site.root | strip_slash }}{% endcapture %}
{% include head.html %}
<body {% if page.body_id %} id="{{ page.body_id }}" {% endif %} {% if page.sidebar == false %} class="no-sidebar" {% endif %} {% if page.sidebar == 'collapse' or site.sidebar == 'collapse' %} class="collapse-sidebar sidebar-footer" {% endif %}>
<header role="banner">{% include header.html %}</header>
<nav role="navigation">{% include navigation.html %}</nav>
<div id="main">
<div id="content">
{{ content | expand_urls: root_url }}
</div>
</div>
<footer role="contentinfo">{% include footer.html %}</footer>
{% include after_footer.html %}
</body>
</html>
head.html:
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>{% if page.title %}{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %} - {% endif %}{{ site.title }}</title>
<meta name="author" content="{{ site.author }}">
{% capture description %}{% if page.description %}{{ page.description }}{% else %}{{ content | raw_content }}{% endif %}{% endcapture %}
<meta name="description" content="{{ description | strip_html | condense_spaces | truncate:150 }}">
{% if page.keywords %}<meta name="keywords" content="{{ page.keywords }}">{% endif %}
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' | strip_slash }}{% endif %}{% endcapture %}
<link rel="canonical" href="{{ canonical }}">
<link href="{{ root_url }}/favicon.png" rel="icon">
<link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />
<link href="{{ site.subscribe_rss }}" rel="alternate" title="{{site.title}}" type="application/atom+xml">
<script src="{{ root_url }}/javascripts/modernizr-2.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="./javascripts/libs/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="{{ root_url }}/javascripts/octopress.js" type="text/javascript"></script>
{% include custom/head.html %}
{% include google_analytics.html %}
</head>
自定义/header.html:
<hgroup>
<h1><a href="{{ root_url }}/">{{ site.title }}</a></h1>
{% if site.subtitle %}
<h2>{{ site.subtitle }}</h2>
{% endif %}
</hgroup>
有人知道我该如何解决这个问题吗？
最好的问候
最佳答案
当我只想为某些部分的背景着色时，我遇到了类似的问题。您需要确保标题与正文位于不同的 div 中。您可以尝试将 hgroup 放入您的 custom/head.html 并确保 head 具有完整的宽度。
关于css - 将 octopress 中标题的宽度更改为 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23792120/