Question

我有一种情况，我在行中有six columns getting generated dynamically。

<div class ="row">
  <div class="col-sm-2">
      <!-- content -->
  </div>
</div>

我想在row的末尾添加一个图标，但由于图标是第7个，因此有six columns分解。无论如何，我们可以add/append图标到行的末尾，而不会将其分成下一行。

Answer 1

您可以使用图标的绝对定位来完成此操作。您需要在此之前进行一些设置，方法是添加相对于其包含的行的位置。

下面的HTML。

<div class="container">
<div class ="row columns-parent">
  <div class="col-sm-2 columns">1
  </div>
  <div class="col-sm-2 columns">2
  </div>
  <div class="col-sm-2 columns">3
  </div>
  <div class="col-sm-2 columns">4
  </div>
   <div class="col-sm-2 columns">5
  </div>
  <div class="col-sm-2 columns">6 
  </div>
  <div class="icon">icon here </div>
</div>
</div>

和CSS

.icon{
    position : absolute;
    right : 0;
}

.columns-parent{
    position:relative;
    padding-right:60px;

}

根据您的要求设置右侧和顶部。同时调整行的右侧填充（此处为60像素），具体取决于图标的像素数，以使图标与内容不重叠。

JS小提琴http://jsfiddle.net/YJcLS/1/

将图标附加到行的列的末尾

1 个答案: