Twitter bootstrap 引导网格挤压链接点击区域

我的引导网格中有以下结构：

<!-- 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和links会比col-xs-1更宽，这就是我想要的结果。但问题是我的可点击区域的宽度是col-xs-1。因此，很难在较小的屏幕上点击这些链接。

---

我如何给我的链接全宽度点击区域

我对你的CSS有一点猜测，但听起来对你的第一列应用高于0的z索引可以解决你的问题。这将使第一列位于profile picture列上方

示例如下：

---

Col-xs-12是全宽的。井剖面图在11列上左对齐，这正是我想要的图形

.flagcolumn {
   z-index:1;
}