Question

我有一个bootstrap导航栏。当下拉列表展开时，我想在下拉列表和列表中的最后一项下添加换行符。

我制作了Bootply并添加了一张图片来说明我想要做的事情。

这是我的jQuery。

$('.dropdown.open .dropdown-toggle').append('<hr class="break-sec-w">');

Answer 1

你的小时应该被包裹在一个div中才能生效。

我尝试修改你的代码 - 尝试下拉

示例

$(document).ready(function($) { $('.hr_line').append('<hr class="break-sec-w">'); });

.break-sec-w { width: 40px; border-top: 1px solid red; margin-top: 10px !important; }

<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container">  <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown 2 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><div class="hr_line"></div></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> <li><div class="hr_line"></div></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><div class="hr_line"></div></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> <li><div class="hr_line"></div></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown 3 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><div class="hr_line"></div></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> <li><div class="hr_line"></div></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li> <li><a href="../navbar-static-top/">Static top</a></li> <li><a href="../navbar-fixed-top/">Fixed top</a></li> </ul> </div> </div> </nav> </div>  </body> </html>

Answer 2

您可以尝试CSS样式。第n个孩子

.nav> li:nth-child(2),
.nav> li:nth-child(7) {
    content: "<hr>"

}

您可能需要更改我在示例中使用的类。

Answer 3

如果您需要一些额外的样式，可以覆盖一些CSS，例如：

.navbar-nav .open ul.dropdown-menu{ 
     border-radius:0px; 
     border:solid 1px red; 
     border-width:1px 0;
}

Updated Bootply.

Answer 4

这是基于您的代码的版本，只使用border：

＆＃13;

/* CSS used here will be applied after bootstrap.css */

hr.break-sec-w {
  width: 40px;
  /* color: #fff !important; */
  border-top: 1px solid #fff;
  margin-top: 10px !important;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
  color: #555;
  background-color: transparent;
}

.navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  text-align: center;
}

.navbar-nav {
  margin: 7.5px -15px;
  text-align: center !important;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
  color: #555;
  background-color: transparent;
}

#navbar a{
  display: inline-block;
}

.dropdown>a {
  border-bottom: 1px solid #f00;
  display: block;
}

.dropdown li:last-child a{
  border-bottom: 1px solid #f00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <!-- Static navbar -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>

          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown 2 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>


              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>

          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>


              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown 3 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>


              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
          <li><a href="../navbar-static-top/">Static top</a></li>
          <li><a href="../navbar-fixed-top/">Fixed top</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>



</div>
<!-- /container -->

＆＃13;

Answer 5

你可以通过多种方式做到这一点，但我非常确定你不应该使用hr。通过边框完成下划线效果，或者在选择器之后完成工作：）

边框示例：

需要与其余元素分开的元素的类，然后是
的css
.classname { border-bottom：1px solid #colorHex; }
选择需要获得下划线效果的某些元素：

.nav＆GT;李：第n个孩子（2）， .nav＆GT;李：第n个孩子（7）{ border-bottom：1px solid #colorHex; }

后选择器示例：

.className{
   position: relative;
}
.className:after{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #yourHex
}

希望有所帮助：）

Answer 6

以下解决方案使用：after pseudo-element：

没有javascript

.navbar-nav .open .dropdown-toggle:after {
    content: ' ';
    width: 10%;
    height: 1px;
    background-color: red;
    display: block;
    margin: 5px auto;
}

这里是bootply

Bootstrap Navbar - 在链接之前和之后添加<hr />

6 个答案:

没有javascript