Question

我想知道是否有办法制作带有js，html或bootstrap的侧栏，在带有自己滚动条的下拉选项卡下有一行图像。我希望我足够具体，你可以大致了解我想要实现的目标

我并没有要求你编写代码只是为了指向正确的方向

Answer 1

Bootstrap使这一切成为可能，构建选项卡所需的所有信息都可用here。显然，您需要将Bootstrap JS和CSS文件调用到HTML页面中。

要使.tab-pane区域可滚动，请添加overflow:auto;。添加white-space: nowrap;以使该选项卡内的图像水平运行。

Codepen上的演示。

希望指出你正确的方向。

＆＃13;

aside {
  width: 300px;
}
#one {
  overflow: auto;
  white-space: nowrap;
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<aside>
<ul class="nav nav-tabs">
  <li><a href="#one" aria-controls="one" role="tab" data-toggle="tab">One</a></li>
  <li><a href="#two" aria-controls="two" role="tab" data-toggle="tab">Two</a></li>

</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="one">
    <img src="http://placehold.it/200x50">
    <img src="http://placehold.it/300x50">
    <img src="http://placehold.it/400x50">
    <img src="http://placehold.it/100x50">
    <img src="http://placehold.it/50">
  </div>
  <div role="tabpanel" class="tab-pane" id="two">
  I am another Tab!</div>
</div>
</aside>

＆＃13;

带有图片和滚动条的侧边栏

1 个答案: