Question

我正试图弄清楚如何让我的col-* div在彼此旁边和下方“贴合”。

所以我对引导程序中的整个网格系统如何工作有一个很好的了解，这就是为什么我不认为我可以做我正在尝试做的事情而没有一些奇怪的CSS。

所以基本上，如果我有6 col-sm-4 div s（在正常的笔记本电脑屏幕上，全尺寸），我最终会在3行的下面排成3行。如果顶行中的一个div比其他div高，那么我将把剩下的四个div直接放在彼此之下。

所以问题就是这样，我怎么摆脱那个“空白”，把行放到，好吧，不像行一样？我已经尝试过只有col-* div，而没有包装row和container div，但我仍然得到相同的结果。

Answer 1

只需打包你的元素＆＃39;在一行中有3个bootstrap div（每个div 2个元素）......或者我错过了什么？

Answer 2

这个问题已经多次以多种形式提出，并且有许多解决方案和YMMV。

一种解决方案是使用git config --global user.name "your-username"选择器清除行。添加媒体查询以根据需要定位各种屏幕分辨率。

nth-child()

.col-sm-4 {
  border: 1px dashed skyblue;
}
/* After every 3rd .col-sm-4 we apply clear: left; */
.col-sm-4:nth-child(3n+1) {
  clear: left;
}

演示JSFiddle。

Answer 3

最简单的方法是将所有内容都视为一行，并在cols中添加每个项目。如果您不想要cols之间的间距，只需删除默认填充。

Fiddle

{
    'status': 'sent',
    'emailSubject': "Some Document",
    'templateId': 'XXXXXXXX-XXXX-4809-a825-1f05a91853e8',
    'accountId': 'XXXXXXX',
    'templateRoles': [{
        'email': 'me@mymail.com',
        'tabs': {
            'textTabs': [{
                'tabLabel': 'Landlord',
                'name': 'Landlord',
                'value': 'John Doe'
            }]
        },
        'name': 'Frank Sinatra',
        'roleName': 'sender'
    }]
}

适合div，而不是行布局

3 个答案: