twitter-bootstrap 使用 Bootstrap 如何水平布局元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19958566/
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
Using Bootstrap how do I layout elements horizontally?
提问by Refracted Paladin
I have the below that I am trying to replicate this mock-up --> 
我有下面的内容，我正在尝试复制这个模型 -->
I am stuck on how to make my elements display horizontally? Would I need to make a list or another "table"? Was able to accomplish it using stylebut it seems like I shouldn't need to.
我被困在如何让我的元素水平显示？我需要列一个清单或另一个“表格”吗？能够使用style它来完成它，但似乎我不需要。
Here's what I have so far -->
这是我到目前为止所拥有的-->
<div id="Row1" class="row">
<div id="Door1" class="col-md-2 panel panel-primary" >
<div id="Door1Head" class="panel-heading">
<span class="badge">1</span>
<h3 class="panel-title">RE031159</h3>
<span class="glyphicon glyphicon-arrow-up"></span>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
12315 Carregeenan WG-16 4000 lbs
</li>
<li class="list-group-item">
1063545 Carp meal spread 1042 lbs
</li>
</ul>
</div>
</div>
<div id="Door2" class="col-md-2">
<span class="badge">2</span>
</div>
<div id="Door3" class="col-md-2">
<span class="badge">3</span>
</div>
<div id="Door4" class="col-md-2">
<span class="badge">4</span>
</div>
<div id="Door5" class="col-md-2">
<span class="badge">5</span>
</div>
<div id="Row2" class="row">
<div id="Door6" class="col-md-2">
<span class="badge">6</span>
</div>
<div id="Door7" class="col-md-2">
<span class="badge">7</span>
</div>
<div id="Door8" class="col-md-2">
<span class="badge">8</span>
</div>
<div id="Door9" class="col-md-2">
<span class="badge">9</span>
</div>
<div id="Door10" class="col-md-2">
<span class="badge">10</span>
</div>
</div>
For bigger picture, I am using Bootstrap 3 within an MVC 5 app. I will be populating the info in the mock-up from a SQL DB using EF6. I am imagining that I will be using some @foreachloops to build each "card".
为了更大的图景，我在 MVC 5 应用程序中使用 Bootstrap 3。我将使用 EF6 从 SQL DB 填充模型中的信息。我想象我将使用一些@foreach循环来构建每个“卡片”。
采纳答案by Scott
As mentioned in a bunch of other comments, all your columns in a row need to add up to 12. There is a couple of ways to correct this. The answer proposed by Robb puts an empty column on each end of the row in order to do this. You could also limit 4 "doors" per row and increase the size of each column to 3. Finally you could come up with a 10 column system, but that might be a little extreme given then other two solutions.
正如许多其他评论中提到的，一行中的所有列都需要加起来为 12。有几种方法可以纠正这个问题。为了做到这一点，Robb 提出的答案在行的每一端放置了一个空列。您还可以限制每行 4 个“门”，并将每列的大小增加到 3 个。最后，您可以提出一个 10 列的系统，但考虑到其他两个解决方案，这可能有点极端。
As far as your headers not aligning horizontally. The following code demosone possible way to do it.
至于你的标题没有水平对齐。以下代码演示了一种可能的方法。
My changes are
我的变化是
<div id="Door1Head" class="panel-heading">
<span class="badge pull-left">1</span>
<span class="glyphicon glyphicon-arrow-up pull-right" ></span>
<h3 class="panel-title text-center">RE031159</h3>
<div class="clearfix text-center">Some text here</div>
</div>
Maybe not the best way to do things in bootstrap, but it works. Hopefully someone can build off of this to get you what you are looking for.
也许不是在引导程序中做事的最佳方式，但它有效。希望有人可以以此为基础来为您提供所需的东西。
回答by TheBlueDog
Not sure this is exactly what you are looking for, but I'd work at having a single row and getting my panels to just iterate inside the row. Something like this:
不确定这正是您要查找的内容，但我会处理一行并让我的面板在该行内进行迭代。像这样的东西：
<div class="row">
<div class="col-2 col-sm-5 col-md-3 col-lg-2 panel panel-primary">
<div class="panel-heading">
<span class="badge">01</span>
<h3 class="panel-title">Panel Title</h3>
</div><!-- /.panel-heading -->
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div><!--/span-->
</div><!-- /.row -->
回答by Eric Hotinger
If you're looking for a completely out-of-the-box solution, I'd recommend using 4 doors per row with a col-lg-3so that you can easily match the 12 column grid layout that is inherit in Bootstrap. Otherwise, you'll have to add some custom CSS to enable a 10-column layout.
如果您正在寻找完全开箱即用的解决方案，我建议每行使用 4 个门，col-lg-3以便您可以轻松匹配 Bootstrap 中继承的 12 列网格布局。否则，您必须添加一些自定义 CSS 以启用 10 列布局。
You pretty much have the concept of how to make horizontal rows already - just make a divwith a class of rowfollowed by more divelements with their size measurements summing up to 12.
您几乎已经有了如何制作水平行的概念 - 只需制作div一个类，row然后是更多div元素，它们的大小测量值总和为 12。
I've made a quick update of your fiddle herewhich basically just fixes some of the HTML you had originally and converted them to col-lg-3.
我在这里快速更新了您的小提琴，它基本上只是修复了您最初拥有的一些 HTML 并将它们转换为col-lg-3.
If you want more precise measurements within the grid, make sure you look up col-xs, col-sm, and col-mdat their website.
如果你想在网格内更精确的测量，确保你抬头col-xs，col-sm以及col-md在他们的网站上。
In order to do this more dynamically, just keep an ongoing counter; every time you hit 4, you reset the counter and you generate a new row and fill elements in.
为了更动态地做到这一点，只需保持一个持续的计数器；每次点击 4 时，您都会重置计数器并生成一个新行并填充元素。
回答by Robb
For a static solution
对于静态解决方案
<!-- ROW 1 -->
<div id="Row1" class="row">
<div id="row1SideBarL" class="col-lg-1"></div>
<div id="Door1" class="col-lg-2 panel panel-primary" >
<div id="Door1Head" class="panel-heading">
<span class="badge">1</span>
<h3 class="panel-title">RE031159</h3>
<span class="glyphicon glyphicon-arrow-up"></span>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
12315 Carregeenan WG-16 4000 lbs
</li>
<li class="list-group-item">
1063545 Carp meal spread 1042 lbs
</li>
</ul>
</div>
</div>
<div id="Door2" class="col-lg-2">
<span class="badge">2</span>
</div>
<div id="Door3" class="col-lg-2">
<span class="badge">3</span>
</div>
<div id="Door4" class="col-lg-2">
<span class="badge">4</span>
</div>
<div id="Door5" class="col-lg-2">
<span class="badge">5</span>
</div>
<div id="row1SideBarR" class="col-lg-1"></div>
</div>
<!-- ROW 2 -->
<div id="Row2" class="row">
<div id="row2SideBarL" class="col-lg-1"></div>
<div id="Door6" class="col-lg-2 panel panel-primary" >
</div>
<div id="Door7" class="col-lg-2">
<span class="badge">2</span>
</div>
<div id="Door8" class="col-lg-2">
<span class="badge">3</span>
</div>
<div id="Door9" class="col-lg-2">
<span class="badge">4</span>
</div>
<div id="Door10" class="col-lg-2">
<span class="badge">5</span>
</div>
<div id="row2SideBarR" class="col-lg-1"></div>
</div>
回答by Stefan
the col-lg- should be in total 12 for every row
col-lg- 每行应该总共有 12 个
you can find this and many other informations at the docu: http://getbootstrap.com/2.3.2/scaffolding.html
您可以在文档中找到此信息和许多其他信息：http: //getbootstrap.com/2.3.2/scaffolding.html
besides this you can also realize something like this without bootstrap by few css lines:
除此之外，您还可以通过几行 css 代码在没有引导的情况下实现这样的事情：
width:20%
height:250px;
display:block;
float:left;
