Bootstrap行对齐问题

Question

以下是我的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>

我的css如下（连同引导程序）：

.profile-picture
{
    max-width: 200px;
    max-height: 200px;
}

.center
{
    margin: 0 auto;
    float: none;
}

这会产生以下输出：

我希望它显示的方式如下所示：

我怎样才能做到这一点？它们不应该显示在SAME线上，因为它们属于同一行吗？每个都有6的长度，为什么它们不能水平对齐？

Answer 1

问题是您要删除列上的必要浮动（通过将float:none设置为.center）。完全删除.center类，不需要它。你也缺少行div ...

注意，我在row标记周围添加了h2。为了易于使用和正确格式化，该标签也需要包装。有助于保持格式化。 ;）

此外，您不应该一个接一个地拥有两个<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>

Answer 2

从不将任何样式或类应用于具有网格类的元素，如果您真的不知道自己在做什么。如果您需要更改某些内容，请使用嵌套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>

Answer 3

使用Bootstrap，您必须包含一个div的{​​{1}}类，如下所示：

row

请参阅其网格系统上的Bootstrap's documentation。