Bootstrap列中的链接在窗口调整大小变得不可点击

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

<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屏幕上，链接也会再次变为可点击。所以我相信这是BS的一些问题。有没有解决这个问题的方法？

来源

2015-10-16 John Locke

很好[这里]（http://jsfiddle.net/nx8w5zmv/）。在小提琴中重现问题。 –

@JSantosh：我在这里转载了这个问题http://jsfiddle.net/akashsinghal/93b1x26a/ –

您的免责声明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>

来源

2015-10-16 17:19:52 ochi

你太快了:) +1 –

@JSantosh hahaha！ thx ...在预感，我试图看看是否是这个问题。这是重叠的...我只是不知道如何OP想布局三个div ... – ochi

OP忘了添加中，小一个额外的小免责div，但OP添加到1 2 div。 –

@ochi指出了这个问题。 #disclaimer div与其他人重叠，因为您将col-xs=*,col-sm-*,col-md-*分配给其他div，但忘记将此免责声明分配给相同的人。所以它重叠了锚标签。代码<div class="col-lg-12 col-md-8 col-sm-6 col-xs-4" id="disclaimer">

Working example

而且你的HTML

部分是不好的格式。 break的语法是<br />，并且您没有正确关闭p标签的免责声明。

来源

2015-10-16 17:30:07

Bootstrap列中的链接在窗口调整大小变得不可点击

回答

相关问题