twitter-bootstrap Bootstrap 行对齐问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19917931/
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 row aligning issue
提问by Jordan Axe
The following is my HTML:
以下是我的 HTML：
<div class=container">
<div class="row">
<h2 class="text-center">Enter your name below</h2>
<div class="col-md-6 center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6 center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
</div>
My css is the following (along with bootstrap):
我的 css 如下（连同引导程序）：
.profile-picture
{
max-width: 200px;
max-height: 200px;
}
.center
{
margin: 0 auto;
float: none;
}
This produces the following output:
这会产生以下输出：
The way I want it to display is as shown below:
我希望它的显示方式如下所示：
How can I achieve this? Shouldn't they get displayed on the SAME line seeing as they are part of the same row? Each has a length of 6 so why don't they horizontally align?
我怎样才能做到这一点？它们不应该显示在同一行上，因为它们是同一行的一部分吗？每个长度为 6，为什么它们不水平对齐？
回答by Mike Barwick
The problem is you're removing the necessary float on the columns(by setting float:noneto .center). Remove that .centerclass altogether, it's not needed. You are also missing row divs...
问题是您正在删除列上必要的浮动（通过设置float:none为 .center）。.center完全删除该类，它不需要。您还缺少行 div...
Note, I added a rowaround the the h2tag as well. For ease-of-use and proper formatting, that tag needs to be wrapped as well. Helps keep the formatting in check. ;)
请注意，我还在标签row周围添加了一个h2。为了易于使用和正确格式化，该标签也需要包装。有助于检查格式。;)
Also, you shouldn't have two <h3>tags one after another like that. Use <p>instead of the second h3 - or better yet, just use one <h3>tag and use <br />to break the one h3 into two lines (see below).
此外，您不应该<h3>像这样一个接一个地放置两个标签。使用<p>而不是第二个 h3 - 或者更好的是，只需使用一个<h3>标签并将<br />一个 h3 分成两行（见下文）。
<div class=container">
<div class="row">
<h2 class="text-center">Enter your name below</h2>
</div>
<div class="row">
<div class="col-md-6">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6">
<h3>Profile name: N/A <br />
Status: Waiting for user input</h3>
</div>
</div>
</div>
回答by hugo der hungrige
Neverapply any styles or classes to elements with grid classes, if you're not really know what you are doing. Use a nested div instead if you need to change something:
永远不要将任何样式或类应用于具有网格类的元素，如果您不知道自己在做什么。如果您需要更改某些内容，请改用嵌套 div：
<div class=container">
<h2 class="text-center">Enter your name below</h2>
<div class ="row">
<div class="col-md-6">
<div class ="center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
</div>
<div class="col-md-6">
<div class ="center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
</div>
</div>
回答by SeeMeCode
With Bootstrap, you have to include a divwith an class of row, so something like this:
使用 Bootstrap，你必须包含一个div类为row，所以是这样的：
<div class="row">
<div class="col-md-6 center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6 center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
See Bootstrap's documentationon their grid system.
请参阅Bootstrap 的网格系统文档。
