html - 将导航栏的底部边框与内容对齐

Question

我希望导航栏的底部分隔符与页面的其余部分对齐。就像重构 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>元素，但这似乎是不好的做法。

向导航栏添加与页面其余部分内容对齐的水平分隔符的优雅且“正确”的方法是什么？

Answer 1

如果你添加一个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>而且我认为该选项没有任何问题。