Ссылки внутри столбца 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, ссылки снова становится кликабелен даже на хв-экране. Поэтому я уверен, что это проблема 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 хочет расставить три divs ... – ochi

OP забыл добавить средний, маленький дополнительный маленький отказ от div, но OP добавил их в 1-й 2 divs. –

@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 не в хорошем формате. синтаксис для разрыва - <br />, и вы не закрыли p.

источник

2015-10-16 17:30:07

Ссылки внутри столбца Bootstrap становятся незаменимыми при изменении размера окна

ответ

Смежные вопросы