Html 如何将两个容器并排放置在引导程序中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22731809/
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
How to place two containers in bootstrap side by side?
提问by Andrey Langovoy
I try to place two containers side by side, but they are stacked on top of each other. Even container-fluid class doesn't help.
我尝试并排放置两个容器，但它们堆叠在一起。即使是容器流体类也无济于事。
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
Container Left
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
Container Right
</div>
</div>
</div>
Is it possible in Bootstrap?
在 Bootstrap 中可以吗？
回答by Mister Epic
Bootstrap uses a 12-column grid, so each one of your divs will take up a row unto itself. You've also placed each one in a row, and rows will always stack. Try this:
Bootstrap 使用 12 列网格，因此您div的每个s 都将占一行。您还将每一行排成一行，并且行将始终堆叠。尝试这个：
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
Container Left
</div>
<div class="col-lg-6">
Container Right
</div>
</div>
</div>
回答by David
You can place independent columns next to each other by wrapping your columns in a parent container and flex box. The columns will automatically have equal widths. Here's an example.
您可以通过将您的列包装在父容器和弹性盒中来将独立的列彼此相邻放置。列将自动具有相等的宽度。这是一个例子。
html
html
<div class="parent-container d-flex">
<div class="container">
<div class="row">
<div class="col">
Container Left
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
Container Right
</div>
</div>
</div>
</div>
回答by stamstam
the thing is that container-fluidis now replaced by containerhttp://www.bootply.com/bootstrap-3-migration-guidebut this is not the matter.
Try the .col-md-offset-*that moves *columns to the right your columns. Check this out http://getbootstrap.com/css/#grid
问题是container-fluid现在被containerhttp://www.bootply.com/bootstrap-3-migration-guide取代，但这不是问题。尝试.col-md-offset-*将*列移动到您的列右侧。看看这个http://getbootstrap.com/css/#grid
