bootstrap-4 - 100% 居中的背景宽度
问题描述
嗨,我的目标是居中并为 li 元素使用全宽。我按模式居中下拉菜单transform: translate(-50%, -50%);
,但我不知道如何设置 100% 的页面宽度。
当你点击Stay Connected
然后显示一个我想要全宽的边框
https://codepen.io/szkut/pen/xBPVqo
.nav-center {
display: flex;
justify-content: center;
}
.outer {
position: relative;
width: 100%;
height: 500px;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* unnecessary styling properties */
width: 100%;
text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<ul class="nav nav-center">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Stay Connected </a>
<ul class="dropdown-menu outer mx-auto kuguar-sport-color ">
<div clas="row kuguar-sport-color mx-auto"> <!--full width of page-->
<li class="inner kuguar-sport-color">
<div class="row mx-auto">
<ul class="list-unstyled col">
<p class="submenu-title">TITLE</p>
<li><a href="#">test1-1</a></li>
<li><a href="#">test1-2</a></li>
<li><a href="#">test1-3</a></li>
</ul>
<ul class="list-unstyled col">
<p class="submenu-title">TITLE</p>
<li><a href="#">test2-1</a></li>
<li><a href="#">test2-2</a></li>
<li><a href="#">test2-3</a></li>
</ul>
<ul class="list-unstyled col">
<p class="submenu-title">TITLE</p>
<li><a href="#">test3-1</a></li>
<li><a href="#">test3-2</a></li>
<li><a href="#">test3-3</a></li>
</ul>
<ul class="list-unstyled col">
<p class="submenu-title">TITLE</p>
<li><a href="#">test3-1</a></li>
<li><a href="#">test3-2</a></li>
<li><a href="#">test3-3</a></li>
</ul>
</div>
</li>
</div>
</ul>
</li>
</ul>
谢谢!
解决方案
为此,您可以...
- 制作下拉菜单
position-static
- 添加
w-100
到dropdown-menu
- 将下拉
flip
选项设置为false
演示:https ://www.codeply.com/go/SVqx2k4cCe
<li class="dropdown position-static">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-flip="false">Stay Connected </a>
<ul class="dropdown-menu w-100 outer mx-auto">
...
</ul>
...
</li>
推荐阅读
- javascript - 从 JavaScript 调用函数到 Node.js 时如何解决错误 require() 未定义
- python - 如何在熊猫列中从时间拆分 0000000+00:00
- python - 用于乘法特征的 keras 和 tensorflow 中的神经网络
- list - 来自列表谓词的 Prolog 列表
- lua - 如何反编译 Lua 文件?
- javascript - 如何使用扩展函数将键和值对添加到对象中
- node.js - 我可以将 PowerShell 数组传输到 node.js 吗?
- excel - 如何避免来自 VBA Excel 的空查询的 Power Query 错误?
- html - 如果删除数组中的对象,如何删除本地存储类?
- azure - 如何创建 azure 应用程序或客户端 ID 来获取资源?