我希望导航栏的底部分隔符与页面的其余部分对齐。就像重构 UI 一样 here
但是,当我在导航栏内向我的容器添加边框时,它会扩展到内容之外,如 so .
<nav class="navbar navbar-expand-lg">
<div class="container" style="border-bottom: 3px solid blue;">
<a class="navbar-brand" href="/index...
我可以在导航栏元素外添加一个容器并添加一个 <hr>
元素,但这似乎是不好的做法。
向导航栏添加与页面其余部分内容对齐的水平分隔符的优雅且“正确”的方法是什么?
最佳答案
如果你添加一个row
元素并将您的样式添加到它而不是您的 container
这可以解决您的问题。
例子:
<nav class="navbar navbar-expand-lg">
<div class="container">
<div class="row" style="border-bottom: 3px solid blue;">
<a class="navbar-brand" href="/index...
row
会有15px
左侧和右侧的填充。它应该减少 border-bottom
的宽度现在 div 已嵌套。
选项二(不更改下方元素的布局):
<div class="container">
<div class="row" style="border-bottom: 3px solid blue;"></div>
<a class="navbar-brand" href="/index...
或者您可以求助于自定义样式 <hr>
而且我认为该选项没有任何问题。
关于html - 将导航栏的底部边框与内容对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57558814/