Блог

Главная - Вопросы по программированию - Загрузочная сетка, сжимающая область щелчка по ссылке

Загрузочная сетка, сжимающая область щелчка по ссылке

#twitter-bootstrap #sprite

#twitter-bootstrap #спрайт

Вопрос:

У меня действительно есть следующая структура в моей bootstrap grid:

 <!-- banner -->
<div class="banner">
   <div class="container-fluid">
     <div class="row">
        <div class="col-xs-1 col-sm-6">
              <div class="social-flag">
                <a href="#" class="linkedin"></a>
                <a href="#" class="twitter"></a>
                <a href="#" class="rss"></a>
              </div>
            </div>
        <div class="col-xs-11 col-sm-6 profile-picture">
    </div>
    </div>
    </div>
    <!-- end banner -->

Социальный флаг div содержит 3 ссылки, расположенные вертикально, с фоновыми изображениями спрайтов.
Когда я изменяю размер своего браузера до мобильной ширины, div с социальным флагом и ссылки становятся шире, чем col-xs-1, это тот результат, который я хочу. Но проблема в том, что моя область, доступная для щелчка, имеет ширину col-xs-1. Поэтому трудно нажимать на эти ссылки на экранах меньшего размера.
Как мне предоставить моим ссылкам область щелчка по всей ширине?

Комментарии:

1. Col-xs-12 имеет полную ширину.

2. Изображение профиля выровнено по левому краю на 11 столбцах, именно так, как я хочу графически

Ответ №1:

Я немного разбираюсь в вашем CSS, но похоже, что применение z-индекса выше 0 к вашему первому столбцу решит вашу проблему. Это приведет к появлению первого столбца над столбцом изображения профиля.

Пример здесь:http://jsfiddle.net/Dw9ZB /

 .flagcolumn {
   z-index:1;
}