twitter bootstrap template 垂直分隔器在Bootstrap 3中不起作用




twitter bootstrap教學 (6)

我打開了Nav示例,它帶有標準的Bootstrap下載(bootstrap-3.0.0 \ examples \ navbar \ index.html),並在兩個鏈接之間添加了垂直分隔符。

但是,它似乎與導航欄沒有任何區別:

<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>

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

現在你可以使用它了

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

如果您自定義導航欄,這裡有一些不足之處:

.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;
}

這非常適合使用bootstrap在鏈接之間創建分隔符。

HTML =>

 <ul class="nav navbar-nav">
            <li><a href="" class="white">Home</a></li>
            <p class="pipes">|</p>
            <li><a href="" class="white">About</a></li>
            <p class="pipes">|</p>
            <li><a href="" class="white">Terms</a></li>
            <li class="signin-link">
            <button type="submit" class="btn btn-default signin-button">SIGN IN</button>
             </li>
          </ul>

CSS =>

.pipes {
  color:white;
  margin-top:14px;
}

因為我也想在項目中做同樣的事情,你可以做類似的事情

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.. */
}

我認為這會使用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;
     }
}

可能這也有助於:

.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%;
}




twitter-bootstrap