2017-07-18 70 views
0

我正在使用Boostrap,並且我有2行每列有3列。使用引導程序(使用引導程序)加入3列到3個其他列

如下面的圖所示:

3 columns for each rows

底部行中的問題是,3列在同一行分組,我要的是下面是3列幾乎粘在上面的3列(不管下面的列的大小),報紙類型。

可以看出如下圖:

expected result

我的代碼(簡單的HTML和角度NG-重複):

<div class="row"> 
    <div ng-repeat="channel in channels"> 
     <div ng-if="$index % 3 == 0" class="clearfix"></div> 
     <div class="col-md-4 well"> 
      <h1 class="h1-class" style="margin-left: 20px"> 
      {{ channel.name }} 
      </h1> 
     </div> 
    </div> 

我怎樣才能做到這一點的朋友?

對不起,如果我的問題是錯誤的,我真的不知道如何問這個。來自智利的問候。

+0

你爲什麼不嘗試單排和成3個該行,並把您的箱子裏面他們定義的高度和CSS它 –

+0

的問題是,有許多列( 8行3列)在我只把2作爲例子的問題。我想在所有行中都做同樣的事情,目前我不知道如何使用引導程序。問候。 –

回答

0
<div class="container"> 
    <div class="col-md-4"> 

     <div style="height:30px;border:1px solid black;">Name 1</div> 
     <div style="height:60px;border:1px solid black;">Name 4</div> 

    </div> 

    <div class="col-md-4"> 

     <div style="height:40px;border:1px solid black;">Name 2</div> 
     <div style="height:30px;border:1px solid black;">Name 5</div> 

    </div> 

    <div class="col-md-4"> 

     <div style="height:20px;border:1px solid black;">Name 3</div> 
     <div style="height:70px;border:1px solid black;">Name 6</div> 

    </div> 
</div> 

enter image description here

+0

嗨,我試過這個,這是我想要的,但我怎麼能適應ng重複?問候和感謝。 –

+0

你可以先開始構建每個col-md-4 div。爲每個代表每列的div製作三個循環。第一個循環應循環索引+ = 3,第二個循環將從索引+ = 3的secon元素開始,第三個循環將從索引+ = 3的第三個元素開始 –

+0

感謝您的幫助朋友,但裏面每一列我必須重複2次元素,我找不到這樣做的邏輯,你能幫助我嗎?謝謝 –