引导药丸在小屏幕上无法点击

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，很抱歉在提供代码方面没有提供更多的帮助，但我真的很感谢您花时间回复我。谢谢!