隐藏在主 div 后面的右箭头答案

【问题标题】：Arrow right hidden at the back of main div隐藏在主 div 后面的右箭头
【发布时间】：2015-01-14 13:00:37
【问题描述】：

<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 上显示箭头并最终被隐藏的原因。

请帮忙。

【问题讨论】：

标签： html css

【解决方案1】：

只需删除溢出：隐藏；来自.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; 
}

【讨论】：

【解决方案2】：

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

【讨论】：

抱歉我的问题不清楚。但感谢您的帮助

【解决方案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

【讨论】：

谢谢，但我已经尝试并得到了相同的结果，但您可以看到箭头仍在侧边栏上，它应该在内容侧的左侧。