不能根据屏幕尺寸排序我的页眉div吗？
不能根据屏幕尺寸排序我的页眉div吗？
提问于 2020-05-20 10:26:48
我有一个标题与三列:菜单，中心和右列与徽标。
我从我的index.php调用bootstrap 3.4.1
我有这个(简化的)代码：
<header id="header" class="container-fluid " style="background-image: url('<?= $header_banner ?>');">
<div class="row h-100 justify-content-xs-right">
<div id="left-menu" class="hidden-xs col-sm-4 col-lg-3">
<jdoc:include type="modules" name="left-menu" />
</div>
<?= file_get_contents(__DIR__ ."/images/menu.svg"); ?>
<div id="center" class="col-xs-12 col-sm-8 col-lg-6 justify-content-end align-items-center">
<jdoc:include type="component" />
</div>
<div id="right-column" class="hidden-xs sm-6 col-lg-3">
<div id="logo" style="background-image: url('<?= $header_logo ?>');">
<a title="Terug naar Startpagina" class="fill-full-div" href="/?stay"> </a>
</div>
</div>
</div>
</header>在CSS中，我定义了顺序：
@media screen and (max-width: 992px) {
/* Safari 6.1+ */
div#left-menu {-webkit-order: 1;}
div#center {-webkit-order: 3;}
div#right-column {-webkit-order: 2;
}
/* Standard syntax */
div#left-menu {order: 1;}
div#center {order: 3;}
div#right-column {order: 2;}
div#right-column
{
Position: relative!important;
right:0;
}
}请参阅：https://ontwikkel.go4people.nl
我想要的是，当屏幕尺寸小于992px时，带有徽标的右列移动到顶部。
我想要的布局有两列，如：
左侧:菜单右侧:顶部-> logo下方的logo主要内容
目前xs (<576px)屏幕和大屏幕(>992px)上的所有功能，但小型en中等屏幕不会堆叠菜单旁边的中间和右列，它们都出现在
这里我漏掉了什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-20 11:30:44
你不必为此使用Css，Bootstrap内置了类order来改变不同大小的列。
你可以向官方document of Bootstrap学习
我添加了一些背景颜色和文本，以便您了解正在发生的事情。
如果我清楚地理解您，当您调整屏幕大小时，您希望Logo图像位于顶部，而菜单在左侧，内容div在徽标图像的右侧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<header id="header" class="container" style="background-image: url('<?= $header_banner ?>');">
<div class="row justify-content-end align-items-start justify-content-xs-right ">
<div style="background-color: teal;" id="left-menu" class=" hidden-xs col-sm-4 col-lg-3">
<jdoc:include type="modules" name="left-menu" />menu
</div>
<?= file_get_contents(__DIR__ ."/images/menu.svg"); ?>
<div class="col-sm-8 col-lg-9">
<div class="row">
<div style="background-color: yellow;" id="center"
class="col-xs-12 col-sm-12 col-lg-6 order-lg-6 order-2 justify-content-end align-items-center">
<jdoc:include type="component" />Content
</div>
<div id="right-column" style="background-color: red;" class="hidden-xs col-sm-12 col-lg-6 order-lg-12 order-1 ">
<div id="logo" style="background-image: url('<?= $header_logo ?>');">
<a title="Terug naar Startpagina" class="fill-full-div" href="/?stay">LOGO Image</a>
</div>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61910759
复制相关文章
相似问题
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
