html - Bootstrap Pills 在小屏幕上不可点击

Question

我似乎无法让我的药丸在小屏幕上发挥作用。他们可以在普通屏幕上很好地标记内容，但是一旦我把屏幕变小，这些药丸就无法点击了。

不知道是什么问题

此外，如果我只有药片，它会弹跳，但一旦它在容器中，它就不会弹跳。

<div class="container-fluid">
        <div class="row" style="margin-top: 1em; border: 2px dashed lightgreen">

            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-3" style="text-align: center; border: 2px dotted purple"><img src="/images/video-thumbnails/ice.jpg" class="songThumbnail">
                    </div>
                    <div class="col-md-5" style="border: 2px dotted purple">
                       TEXT TEXT TEXT</div>

                    <div class="col-md-4 col-xs-12">
                        TEXT TEXT TEXT
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12" style="margin: 1em;">
                        <img src="/images/icons/piapro.png" class="favicon"> <a href="http://piapro.jp/t/O28F">ice - オケ</a> <span class="whisper">(karaoke)</span>
                    </div></div>

            </div><div class="col-md-4" style="border: 1px solid red; float: right;">
                <ul class="nav nav-pills">
                    <li class="active"><a data-toggle="pill" href="#niconico">Niconico</a></li>
                    <li><a data-toggle="pill" href="#youtube">YouTube</a></li>
                    <li><a data-toggle="pill" href="#soundcloud">SoundCloud</a></li>
                </ul>

                <div class="tab-content" style="text-align:center;">
                    <div id="niconico" class="tab-pane fade in active">
                        <p><div class="embed-responsive embed-responsive-16by9" ><script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm28116292"></script><noscript><a href="http://www.nicovideo.jp/watch/sm28116292">【ニコニコ動画】【Faeri】ice【歌ってみた】</a></noscript>
                        </div></p>
                    </div>
                    <div id="youtube" class="tab-pane fade">
                          <br>
                            <strong>日本語 | Japanese</strong><br>
                          <br>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/JOd9cunyWAg"></iframe>
                            </div>
                          <br>
                          <strong>英語 | English</strong><br>
                          <br>
                          <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/mCkHvttcSoE"></iframe>
                            </div>
                    </div>
                    <div id="soundcloud" class="tab-pane fade">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" width="100%" height="600" scrolling="yes" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/244661025&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
                      </div>
                  </div>
                </div>
                <br>
                <p>TEXT TEXT TEXT</p>
            </div></div>

Answer 1

再次重新实现页面并摆弄列/行后，我意识到它是 z-index 的情况。哎呀。在我更改 div 的 bg 颜色之前，它并不明显。

我最终为媒体侧边栏编写的代码是这样的:

<div class="col-md-4 col-lg-4 pull-right" style="background-color: #99CCFF; border: 3px dotted red; display: block; z-index: 1; margin-top: 1em;">
            <!-- All that jazz and other stuff -->

        </div>

它似乎像我想要的那样工作。希望它不会在未来打嗝我。 @NathanielFlick，很抱歉在提供代码方面没有提供更多帮助，但我真的很感谢你抽出时间回复我。谢谢!