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

用于菜单项（在您的情况下，它将是您添加border-bottom的div。）

USE NAVBAR

但是看看你的代码，我建议你使用bootstraps navbar组件以正确的方式构建菜单。

在这里阅读更多相关信息：

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

Bootstrap导航栏如何使用两边都有空格的行加下划线？

3 个答案: