세로 구분선이 Bootstrap 3에서 작동하지 않습니다.

세로 구분선이 Bootstrap 3에서 작동하지 않습니다.

---

표준 Bootstrap 다운로드 (bootstrap-3.0.0 \ examples \ navbar \ index.html)와 함께 제공되는 Nav 예제를 열고 두 링크 사이에 세로 구분선을 추가했습니다.

그러나 탐색 모음에는 아무런 차이가없는 것 같습니다.

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Link3</a></li>

---

나는 이것이 3.0을 사용하여 다시 가져올 것이라고 생각합니다.

.navbar .divider-vertical {
    height: 50px;
    margin: 0 9px;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #f2f2f2;
}

.navbar-inverse .divider-vertical {
    border-right-color: #222222;
    border-left-color: #111111;
}

@media (max-width: 767px) {
    .navbar-collapse .nav > .divider-vertical {
        display: none;
     }
}

---

.divider-vertical {
height: 50px;
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}

이제 사용할 수 있습니다

<ul>
    <li class="divider-vertical"></li>
</ul>

---

나는 또한 프로젝트에서 같은 것을 원했기 때문에 다음과 같은 것을 할 수 있습니다.

HTML

<div class="col-md-6"></div>
<div class="divider-vertical"></div>
<div class="col-md-5"></div>

CSS

.divider-vertical {
    height: 100px;                   /* any height */
    border-left: 1px solid gray;     /* right or left is the same */
    float: left;                     /* so BS grid doesn't break */
    opacity: 0.5;                    /* optional */
    margin: 0 15px;                  /* optional */
}

적게

.divider-vertical(@h:100, @opa:1, @mar:15) {
    height: unit(@h,px);             /* change it to rem,em,etc.. */
    border-left: 1px solid gray;
    float: left;
    opacity: @opa;
    margin: 0 unit(@mar,px);         /* change it to rem,em,etc.. */
}

---

navbar를 사용자 정의하는 경우 다음과 같이 몇 가지가 적습니다.

.navbar .divider-vertical {
    height: floor(@navbar-height - @navbar-margin-bottom);
    margin: floor(@navbar-margin-bottom / 2) 9px;
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #ffffff;
}

---

일부 상단 및 하단 패딩과 함께 파이프 문자를 사용하면 잘 작동합니다. 테두리가있는 div를 사용하면 세로로 정렬하고 다른 요소와도 가로 간격을 유지하기 위해 더 많은 CSS가 필요합니다.

CSS

.divider-vertical {
    padding-top: 14px;
    padding-bottom: 14px;
}

HTML

<ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li class="divider-vertical">&#124;</li>
    <li><a href="#">Faq</a></li>
    <li class="divider-vertical">&#124;</li>
    <li><a href="#">News</a></li>
    <li class="divider-vertical">&#124;</li>
    <li><a href="#">Contact</a></li>
</ul>

---

이것이 또한 도움이 될 수 있습니다.

.navbar .divider-vertical {
    margin-top: 14px;
    height: 24px;
    border-left: 1px solid #f2f2f2;
    border-image: linear-gradient(to bottom, gray, rgba(0, 0, 0, 0)) 1 100%;
}

참고 URL : https://stackoverflow.com/questions/19203816/vertical-divider-doesnt-work-in-bootstrap-3