Bootstrap navbar 如何在两边都有空格的线下划线？

Question

我正在尝试使用 bootstrap 3 制作菜单，实际上我使用的是这样的代码：

        <section id="menu">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12 col-sm-2">
                    <img class="img-responsive" src="logo.jpg" alt="logo">
                </div>
                <div class="col-xs-12 col-sm-2 nana">
                    <p>Some other menu</p>
                </div>
                <div class="col-xs-12 col-sm-2">
                    <p>Some other menu</p>
                </div>
                <div class="col-xs-12 col-sm-2">
                    <p>Some other menu</p>
                </div>
                <div class="col-xs-12 col-sm-2">
                    <p>Some other menu</p>
                </div>
                <div class="col-xs-12 col-sm-2">
                    <p>Some other menu</p>
                </div>
            </div>
        </div>
    </section>

但我想实现这个：

如何放置线条，我使用“border-bottom”属性，但它扩展了所有列，我只想分隔每个菜单，如果我应用边距，它只会破坏菜单。

有没有办法做到这一点？ 我正在考虑使用 :before, :after,

但我不知道，任何人都可以帮助我！

Answer 1

您可以使用css ::after Selector 来创建这种类型的东西。

.col-sm-2::after {
    content: "";
    position: absolute;
    width: 90%;
    height: 3px;
    left: 0;
    right: 0;
    margin: auto;
    background: #aaa;
    transition: all .35s;
}
.col-sm-2:hover::after {
    background: #68c122;
}

这是一个小的fiddle 开始。 但我强烈建议使用<nav class="navbar" role="navigation"></nav> 用于创建导航。

Answer 2

试试:hover伪类

ul li {
  display: inline;
  text-align: center;
}

a {
  display: inline-block;
  width: 25%;
  padding: .75rem 0;
  margin: 0;
  text-decoration: none;
  color: #333;
}

.two:hover ~ hr {
  margin-left: 25%;
}

.three:hover ~ hr {
  margin-left: 50%;
}

.four:hover ~ hr {
  margin-left: 75%;
}

hr {
  height: .25rem;
  width: 25%;
  margin: 0;
  background: green;
  border: none;
  transition: .3s ease-in-out;
}

<div class="container">
  <ul>
    <li class="one"><a href="#">Menu Text</a></li><!--
 --><li class="two"><a href="#">Menu Text</a></li><!--
 --><li class="three"><a href="#">Menu Text</a></li><!--
 --><li class="four"><a href="#">Menu Text</a></li>
    <hr />
  </ul>
</div>

Answer 3

简单只需添加

margin-left: 2px;
margin-right: 2px; // change the values based on your requirement

对于菜单项（在您的情况下，它将是您添加边框底部的 div）。

使用导航栏

但是查看您的代码，我想建议您使用引导程序navbar 组件以正确的方式构建菜单。

在此处了解更多信息：

https://getbootstrap.com/components/#navbar