Question

JSFIDDLE DEMO

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li>
                    <a href="#">1</a>
                </li>
                <li class="active arrow_box">
                    <a href="#">2</a>
                </li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-3 col-md-10 col-md-offset-2 main">
            Example content with tabs at top
        </div>
    </div>
</div>

CSS

.sidebar {
  display: none; }
  @media (min-width: 50em) {
    .sidebar {
      position: fixed;
      top: 30px;
      bottom: 0;
      left: 0;
      z-index: 1000;
      display: block;
      padding: 20px 0;
      margin-right: 20px;
      overflow: hidden;
      background-color: #E5E5E5; } }

.nav-sidebar > li > a {
  color: #262626;
  font-size: 16pxpx;
  padding: 24px 20px 24px 50px; }

.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #30C4A3;
  background-color: #333;
 }

.nav-sidebar > li.active a:after {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid re;
  position: absolute;
  bottom: -13px;
  width: 0px;
  left: 0;
  margin-left: -10px;
  z-index: 90000; }

.main {
  overflow: hidden;
  max-width: 1024px;
  padding: 10px 0;
  z-index: 0; }
  @media (min-width: 50em) {
    .main {
      padding-right: 40px;
      padding-left: 40px; } 
}

.arrow_box {
  background: #595959;
}

.arrow_box:after {
  left: 100%;
  top: 70%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(89, 89, 89, 0);
  border-left-color: #595959;
  border-width: 15px;
  margin-top: -30px;
  z-index: 4000;
}

使用的Bootstrap Dashboard模板示例。

尝试省略overflow-x但滚动出现，箭头只能在向右滚动时看到。尝试添加填充或边距以在li旁边显示额外的空间以显示箭头，但箭头仍然隐藏在主div之后。还尝试将z-index添加到标题，侧边栏，主要但也没有帮助。

更新忘了澄清我得到的箭头只在侧边栏上。它应该位于内容div左侧的侧边栏之外。这就是为什么我试图在主要div上看到箭头并最终被隐藏。

请帮忙。

Answer 1

只需删除overflow：hidden;来自.sidebar

此处示例http://jsfiddle.net/u2Lbx4kc/3/

.sidebar {
      position: fixed;
      top: 30px;
      bottom: 0;
      left: 0;
      z-index: 1000;
      display: block;
      padding: 20px 0;
      margin-right: 20px;    
      background-color: #E5E5E5; 
}

Answer 2

我没有完全理解您的问题但是当min-width被删除后，带有类箭头的li似乎出现http://jsfiddle.net/u2Lbx4kc/1/

Answer 3

将类添加到ul以赋予其宽度

HTML

        <ul class="nav nav-sidebar col-sm-12 col-md-12">
            <li> <a href="#">1</a>

            </li>
            <li class="active arrow_box"> <a href="#">2</a>

            </li>
        </ul>

Fiddle

箭头右侧隐藏在主div的后面

3 个答案: