Bootstrap 4 add vertical divider pipe

问题

Hi i am trying to add some separator between nav-link but it does not work

i tried to add

nav-link:after {
content:"|";
}

but it is not working or it shows in the left side.

here is my code:

    <nav class="navbar navbar-expand-md navbar-dark bg-color">
        <div class="navbar-brand header-title">Title</div> <!-- this is in the middle -->
        <div class="navbar-collapse collapse" id="collapsingNavbar">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="navbar-brand" href="#">
                        <img src="logo.png" />
                    </a>
                </li>
            </ul>
<!-- Here between nav-item I would lik to add pipe speparator -->
            <ul class="navbar-nav ml-auto">
                <div class="nav-item nav-link mr-md-2">
                    <div> some test some test</div>
                </div>
                <div class="nav-item nav-link mr-md-2">
                     <div> some test</div>
                </div>
                <li class="nav-item nav-icons">
                    <a  href="">
                        <span class="icon"> X </span>
                    </a>
                </li>
                <li class="nav-item nav-icons">
                    <a  href="">
                        <span class="icon"> V </span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

回答1:

You forgot . before class in css .nav-link and set position: absolute; to position it...

See fiddle:https://jsfiddle.net/3ah58br4/7/

body{background-color:black!important;}
.nav-link:after {
    content: "|";
    position: absolute;
    top: 16px;
    margin-left: -10px;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <nav class="navbar navbar-expand-sm navbar-dark bg-color">
        <div class="navbar-brand header-title">Title</div> <!-- this is in the middle -->
        <div class="navbar-collapse collapse" id="collapsingNavbar">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="navbar-brand" href="#">
                        <img src="logo.png" />
                    </a>
                </li>
            </ul>
<!-- Here between nav-item I would lik to add pipe speparator -->
            <ul class="navbar-nav ml-auto">
                <div class="nav-item nav-link mr-md-2">
                    <div> some test some test</div>
                </div>
                <div class="nav-item nav-link mr-md-2">
                     <div> some test</div>
                </div>
                <li class="nav-item nav-icons">
                    <a  href="">
                        <span class="icon"> X </span>
                    </a>
                </li>
                <li class="nav-item nav-icons">
                    <a  href="">
                        <span class="icon"> V </span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

来源：https://stackoverflow.com/questions/50960837/bootstrap-4-add-vertical-divider-pipe

标签

css

bootstrap-4