Question

我的HTML页面中有以下代码。当浏览器窗口最大化时链接正常工作，但是当我在移动浏览器上测试链接时，链接变得无法点击。

<div class="col-lg-2 col-md-2 col-sm-2 col-xs-5">
    <label>Legal</label><br>
    <a href="./termsofuse.html">Terms of Use</a><br>
    <a href="./privacypolicy.html">Privacy Policy</a><br>
    <a href="#FAQ">FAQs</a><br>
</div>

如果从DIV中删除引导列类，即使在xs-screen上，链接也会再次变为可点击。所以我确信这是BS的一些问题。有没有解决方法呢？

Answer 1

您的免责声明CSS与同一行中的其他两列混合并重叠链接。（请查看您的免责声明需要多少空间：http://jsfiddle.net/93b1x26a/2/）

您需要将免责声明添加到单独的行中。类似的事情:(现在，我不知道你希望免责声明的行为如何，所以我只是给你这个代码作为样本工作替代） -

请参阅updated fiddle：

<div class="myfooter" id="footer">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-5">
                <label>Legal</label>
                <!-- contents of first col -->
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-7">
                <label>More</label>
                <!-- contents of second col -->
            </div>
        </div>
        <!-- separate row for disclaimer -->
        <div class="row">
            <div class="col-md-8" id="disclaimer">
                <label>Disclaimer</label>
                <br>
                <p>Placeholder text</br>
                    <p>
            </div>
        </div>
    </div>
</div>

Answer 2

@ochi指出了这个问题。 #disclaimer div与其他div重叠，因为您将col-xs=*,col-sm-*,col-md-*提供给其他div但忘记给这个免责声明div提供相同的内容。所以它是重叠的锚标签。

代码的一部分<div class="col-lg-12 col-md-8 col-sm-6 col-xs-4" id="disclaimer">

Working example

您的HTML格式不正确。 break的语法为<br />，您没有在免责声明中正确关闭p标记。

在调整窗口大小

2 个答案: