Bootstrap 导航栏如何在两边加空格的线下划线？

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 伪 class

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

Bootstrap 导航栏如何在两边加空格的线下划线？

Bootstrap navbar how can i underline with a line with spaces in both sides?

html

css

navbar

twitter-bootstrap-3