twitter-bootstrap 没有行的引导程序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24010956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap without rows?
提问by ericosg
I love bootstrap, but i'm trying to achieve something totally outsides its expected grid, which is to have cells stack under each other without grouped lines. Something like Pinterest, if you will.
我喜欢引导程序，但我正在尝试实现完全超出其预期网格的东西，即让单元格在没有分组线的情况下彼此堆叠。如果你愿意的话，像 Pinterest 这样的东西。
Bootstrap normal grid:
Bootstrap 普通网格：
Bootstrap no rows concept:
Bootstrap 无行概念：
Perhaps the correct answer is "don't use bootstrap" but having built many sites with it, I would love to continue using it and find a way around this.
也许正确的答案是“不要使用引导程序”，但是已经用它构建了许多站点，我很想继续使用它并找到解决方法。
If indeed i should use another responsive framework with a grid system more like what I need, what would you recommend?
如果我确实应该使用另一个具有网格系统的响应式框架，更像是我需要的，你会推荐什么？
tia
蒂亚
采纳答案by Evgeniy
Looks like you have to use JS to reach goal.
看起来你必须使用 JS 才能达到目标。
You can use following libs:
您可以使用以下库：
Jquery Wookmark- Light weight and fast. Used in myself resolving similar issue
Jquery Wookmark- 重量轻，速度快。用于我自己解决类似问题
Isotope- Flexible and reach functions one
同位素- 灵活和可达功能之一
Mansonry- Popular lib, similar to Isotope
Mansonry- 流行的库，类似于同位素
回答by Jo-Go
I've worked on a similar problem for a nested drag'n-drop box api with goal to be compliant with bootstrap grid on final render, the builder wasn't a bootstrap grid but a home made similar paradigm of bootstrap grid and I've fixed it with the CSS3 marvelous flexbox
我已经为嵌套的拖放框 api 解决了类似的问题，目标是在最终渲染时与引导网格兼容，构建器不是引导网格，而是自制的类似引导网格范例，我已经用 CSS3 了不起的 flexbox 修复了它
take a look at Solved by flexbox
I have putted a root row (only one for multiline) and added a class to it which implement
我已经放置了一个根行（只有一个用于多行）并添加了一个类来实现
display: flex;
flex-wrap: wrap;
eg:
例如：
<div class="row flex-row">
<div class="col-6">Variable height content</div>
<div class="col-3">...</div>
<div class="col-12">...</div>
<div class="col-3">...</div>
...
</div>
and the css
和 CSS
.flex-row{
display: flex;
flex-wrap: wrap;
}
this will have the effect to adjust automatically the height of all the box that is on same line to the bigger one
这将具有自动将同一行上所有框的高度调整为较大框的效果
回答by serakfalcon
The key thing to realize about the col-(size)-(gridsize)is that they will wrap left to right then top to bottom. So, if you make a colwith a grid size less than 12, other colwill begin to wrap around. You can also nest them as needed to split up the page. So, it's possible to create a 'rowless' layout like so:
要意识到的关键col-(size)-(gridsize)是它们将从左到右然后从上到下包裹。因此，如果您制作的col网格尺寸小于 12，则其他col将开始环绕。您还可以根据需要嵌套它们以拆分页面。因此，可以像这样创建“无行”布局：
(this isn't an amazing demo but it illustrates that what you want is possible) http://jsfiddle.net/7575A/1/
（这不是一个了不起的演示，但它说明了您想要的东西是可能的） http://jsfiddle.net/7575A/1/
回答by gpantic
You could try inverting columns and rows in bootstrap.
您可以尝试在引导程序中反转列和行。
<div class="row">
<div class="col-sm-4">
<div class="row">Some content here</div>
<div class="row">Some content here with more text than the first content but it still needs some more</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
</div>
<div class="col-sm-4">
<div class="row">Some content here</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
</div>
</div>
Here is a jsfiddleof this.
这是一个jsfiddle。
回答by Mezzdeen
you can use row in col and then but new cols in these rows if you have problem in padding make your classes no-padding / no-left-padding / no-right-padding
您可以在 col 中使用 row 然后在这些行中使用新的 cols 如果您在填充时遇到问题使您的类无填充/无左填充/无右填充
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
</div>
