Question

当我将position:fixed添加到我的引导程序侧边栏时，它会在右侧留下空隙。我试过删除边距，填充等，但没有运气。

这是差距的样子：

如果没有position:fixed，则侧边栏中的活动元素会扩展到父级的整个宽度。

HTML：

 <div class="container-fluid">
      <div class="row">
        <div class="col-lg-2 matchHeight" id="side-menu" style="margin-left:30px;">
          <ul class="nav nav-sidebar" id="timeline_sidemenu" style="list-style-type:none;">
            <li style="text-align:center;color:#999999; margin-bottom:20px;border:0px;"><img src="//i.imgur.com/zOeEoKE.png" width="50"/><br />Instagram</li>
            <li class="active">
                <a href="#"><img src="{{url_for('static', filename='images/icons/timeline_hover.png')}}" width="18" style="margin-top:-5px;" />&nbsp;&nbsp;Timeline</a>
            </li>
            <li><a href="/product-evolution/" class="swap" ><img src="{{url_for('static', filename='images/icons/product.png')}}" data-image-regular="{{url_for('static', filename='images/icons/product.png')}}" data-image-hover="{{url_for('static', filename='images/icons/product_hover.png')}}" width='18'>&nbsp;&nbsp;Product Evolution</a></li>
            <li><a href="/insta_charts/" class="swap"><img src="{{url_for('static', filename='images/icons/chart.png')}}" data-image-regular="{{url_for('static', filename='images/icons/chart.png')}}" data-image-hover="{{url_for('static', filename='images/icons/chart_hover.png')}}" width='18' style="margin-top:-5px;">&nbsp;&nbsp;Growth Data/Charts</a></li>
            <li><a href="/90-days/" class="swap"><img src="{{url_for('static', filename='images/icons/flag.png')}}" data-image-regular="{{url_for('static', filename='images/icons/flag.png')}}" data-image-hover="{{url_for('static', filename='images/icons/flag_hover.png')}}" width='18' style="margin-top:-5px;">&nbsp;&nbsp;First 90 days in Market</a></li>
            <li><a href="/public-discussion/" class="swap"><img src="{{url_for('static', filename='images/icons/publicdiscussion.png')}}" data-image-regular="{{url_for('static', filename='images/icons/publicdiscussion.png')}}" data-image-hover="{{url_for('static', filename='images/icons/publicdiscussion_hover.png')}}" width="18"  style="margin-top:-5px;" />&nbsp;&nbsp;Public Discussion</a></li>
            <li style="border-bottom:1px solid #cccccc;"><a href="/founder-activity/" class="swap"><img src="{{url_for('static', filename='images/icons/avatar.png')}}" data-image-regular="{{url_for('static', filename='images/icons/avatar.png')}}" data-image-hover="{{url_for('static', filename='images/icons/avatar_hover.png')}}" width="18"  style="margin-top:-3px;" />&nbsp;&nbsp;Founder Activity</a></li>
          </ul>
        </div>

的CSS：

#side-menu{
  background-color:#efefef;
  border-left:1px solid #cccccc;
  border-bottom:1px solid #cccccc;
  border-right:1px solid #cccccc;
  border-top:1px solid #cccccc;
  padding:25px 0px 0px 0px;
  box-shadow: 2px 2px 2px #cccccc;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  position:relative;
}
#timeline_sidemenu{
  position:fixed;
}
.nav-sidebar > li{
  border-top:1px solid #cccccc;
}
/* Sidebar navigation */
.nav-sidebar > li > a {
  font-family:  proxima-nova,Proxima Nova,helvetica,arial,sans-serif;
  font-weight: 500;
}
.nav-sidebar > li > a:hover,
.nav-sidebar > li > a:focus {
  background-color: #f6f6f6;
}
.nav-sidebar  a{
  color:#999999;
}

.nav-sidebar  a:hover,
.nav-sidebar  a:focus {
  color: #666666;
  background-color: #171919;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  background-color: #ffffff;
  font-family:  proxima-nova,Proxima Nova,helvetica,arial,sans-serif;
  font-weight: 500;
  color: #666666;
}
.nav-sidebar > .active > a::before {
  content: "";
  position: absolute;
  border-style: solid;
  display: block;
  width: 0;
  top:10px; /* controls vertical position */
  bottom:auto;
  right:0px;
  border-width:10px 12px 10px 0;
  border-color:transparent #cccccc;
}
.nav-sidebar > .active > a::after {
  content: "";
  position: absolute;
  border-style: solid;
  display: block;
  width: 0;
  top:10px; /* controls vertical position */
  bottom:auto;
  right:-1px;
  border-width:10px 10px 10px 0;
  border-color:transparent #ffffff;
}

Answer 1

有点不高兴我无法使用纯css，但我能够通过名为Sticky-kit的jQuery库半解决此问题。

我最终从css中删除了position:fixed属性，并在html代码的脚本标记之间只包含了$("#timeline_sidemenu").stick_in_parent();。

Sticky Bootstrap侧边栏沿右边距创建间隙

1 个答案: