我是Drupal 8
平台的新手。首先,我尝试使用Bootstrap
创建响应式布局,但我不想使用Drupal提供的现成的bootstrap主题。我主题的文件夹结构如下所示:
themes
custom
lexus
css
style.css
includes
bootstrap
bootstrap-theme.css
bootstrap-theme.css.map
bootstrap.css
templates
page.html.twig
lexus.libraries.yml
lexus.info.yml
page.html.twig
<div id="page">
{% if page.headline %}
<section id="headline">
<div class= "container">
{{ page.headline }}
</div>
</section>
{% endif %}
<header id="header" class="header">
<div class="container">
{{ page.header }}
</div>
</header>
<section id="main">
<div class="container">
<div class="row">
<div id="content" class="col-md-9 col-sm-9 col-xs-12">
{{ page.content }}
</div>
{% if page.sidebar_first %}
<aside id="sidebar" class="sidebar col-md-3 col-sm-3 col-xs-12">
{{ page.sidebar_first}}
</aside>
{% endif %}
</div>
</div>
</section>
{% if page.footer %}
<footer id="footer" class>
<div class="container">
{{ page.footer }}
</div>
</footer>
{% endif %}
</div>
lexus.info.yml
name: Lexus
description: Two column responsive layout
type: theme
core: 8.x
version: 8.2.0
base theme: bartik
libraries:
- lexus/global-styling
lexus.libraries.yml
global-styling:
css:
theme:
includes/bootstrap/css/bootstrap.css: {}
css/style.css: {}
当站点在桌面视图中加载时,它似乎没有使用引导列安排。 content
部分占用整个浏览器宽度并在其下方推送sidebar_first
内容。以下是我的桌面视图的屏幕截图:
但是当我将浏览器调整为移动视图时,响应性看起来很有效。以下是移动视图的屏幕截图。
请帮助我理解我做错了什么。
答案 0 :(得分:0)
这可能是因为您的设备被认为是大型的&#34;通过bootstrap最大化时。你现在还没有&#34; col-lg-X&#34;类。尝试更改
def createDataFrame[A <: Product](data: Seq[A])(implicit arg0: scala.reflect.api.JavaUniverse.TypeTag[A]): DataFrame
到
<div id="content" class="col-md-9 col-sm-9 col-xs-12">