编辑：我在上面看到了你的评论。你能创建一个新的div吗？
我想要一个包含一些项目的菜单，每个项目都应该在右边有一个边框，并且应该有一个底部边框，但占据整个宽度。问题是边界底部只占据了容器的宽度，而不是整个宽度。容器类应该是必需的，因为类别文本应该只占据容器宽度。
此外，当用户悬停在每个项目上时，它应该在项目下方显示一个边框底部，并且它正在工作，问题是当用户悬停每个项目时，项目文本会移动一点，你知道为什么吗？
你知道如何解决这些问题吗？
问题代码：http://jsfiddle.net/pjgt1q35/
HTML
<div class="jumbotron p-0 m-0">
<div class="container">
<div class="row align-items-center">
<div class="col-7">
<h1 class="display-5 font-weight-bold text-dark">Title</h1>
<p class="lead text-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt voluptatum consequatur deserunt vel dicta voluptatibus sit asperiores minus dolore quidem assumenda amet officiis sequi facere harum accusamus, possimus omnis reiciendis.</p>
</div>
<div class="col-5">
<img src="https://via.placeholder.com/490" width="490" height="300">
</div>
</div>
</div>
</div>
<div class="container">
<div class="col p-0 m-0">
<ul class="categories_menu">
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 1</a>
</li>
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 2</a>
</li>
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 3</a>
</li>
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 4</a>
</li>
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 5</a>
</li>
<li><a data-toggle="modal" id="" data-target="" href="">More
<i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
CSS
.categories_menu {
display: -moz-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
transition: all 100ms ease-out;
li {
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 5px solid transparent;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-moz-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
height: 59px;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 10px 0 5px 0;
border-left: 1px solid red;
border-bottom: 1px solid red;
&:first-child {
border-left: 0;
}
&:hover {
border-bottom: 5px solid red;
color: #000;
cursor: pointer;
text-decoration: none
}
a {
color: #414e5f;
font-size: 18px;
font-weight: bold;
}
&.active {
border-bottom: 5px solid red;
}
}
}
要制作全宽容器，可以使用container-flex而不是container。在容器中创建一个row，并将col放在那里。
<div class="container-flex">
<div class="menu-row row">
<div class="col p-0 m-0">
<ul class="categories_menu">
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 1</a>
</li>
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 2</a>
</li>
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 3</a>
</li>
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 4</a>
</li>
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 5</a>
</li>
<li><a data-toggle="modal" id="" data-target="" href="">More
<i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
使用这种风格：
.menu-row {
border-bottom: 1px solid red;
}
.menu-row ul {
margin-bottom: 0;
}
为了避免移动悬停<li>的问题，请使用以下样式：
a {
color: #414e5f;
font-size: 18px;
font-weight: bold;
border-bottom: 5px solid transparent;
}
&.active {
border-bottom: 5px solid red;
}
.categories_menu {
display: -moz-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
transition: all 100ms ease-out;
}
li {
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 5px solid transparent;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-moz-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
height: 59px;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 10px 0 5px 0;
border-left: 1px solid red;
}
li:first-child {
border-left: 0;
}
li:hover {
border-bottom: 5px solid red;
color: #000;
cursor: pointer;
text-decoration: none
}
a {
color: #414e5f;
font-size: 18px;
font-weight: bold;
border-bottom: 5px solid transparent;
}
&.active {
border-bottom: 5px solid red;
}
.menu-row {
border-bottom: 1px solid red;
}
.menu-row ul {
margin-bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container-flex">
<div class="menu-row row">
<div class="col p-0 m-0">
<ul class="categories_menu">
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 1</a>
</li>
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 2</a>
</li>
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 3</a>
</li>
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 4</a>
</li>
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 5</a>
</li>
<li><a data-toggle="modal" id="" data-target="" href="">More
<i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</body>
</html><div class="bottom-bordered-div">
....your entire code starting with the containing container div
</div>
只要给它一个底部边框，它就会包裹你的容器，这样你的菜单仍然在容器宽度内。
菜单左侧有填充
.categories_menu {
padding-left:0;
}
悬停时菜单项移动的原因是因为您有以下
悬停
border-bottom: 5px solid red
非悬停
border-bottom: 1px solid red;
悬停和非悬停之间有4倍的空间，因此悬停时项目将向下移动4倍。
悬停时应将边框添加到<a>而不是<li>