html - 使用 Bootstrap 将 3 列连接到其他 3 列(无论大小)

标签 html css twitter-bootstrap

我正在使用 Boostrap,我有 2 行,每行有 3 列。

如下图所示:

3 columns for each rows

底行的问题是 3 列被分组在同一行,我想要的是下面的 3 列几乎粘在上面的 3 列上(不管下面列的大小) , 报纸类型。

如下图所示:

expected result

我的代码(简单的 HTML 和 Angular ng-repeat):

<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>

我怎样才能得到这个 friend ?

对不起,如果我的问题是错误的,我真的不知道怎么问这个。来自智利的问候。

最佳答案

<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

关于html - 使用 Bootstrap 将 3 列连接到其他 3 列(无论大小),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45175835/

相关文章:

jquery - 现在处理字幕的正确方法?

html - ul li 在它的上 li 有长文本时中断

javascript - jquery点击按钮问题

html - 响应式背景图片 bootstrap 3

javascript - 按升序对本地存储分数进行排序

Javascript 只显示一次 div

css - SVG 元素列表

html - 页脚图标未对齐

html - 当 div 宽度太小时停止图像换行

css - 更改 bootstrap.scss 文件