1

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

这会产生以下输出： 在此处输入图像描述

我希望它显示的方式如下所示： 在此处输入图像描述

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

4

3 回答 3

3

问题是您要删除列上必要的浮动（通过设置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>
于 2013-11-11T23:23:47.467 回答
1

如果您不知道自己在做什么，切勿将任何样式或类应用于具有网格类的元素。如果您需要更改某些内容，请改用嵌套 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>
于 2013-11-11T23:24:02.793 回答
1

使用 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>

请参阅Bootstrap在其网格系统上的文档。

于 2013-11-11T23:26:02.503 回答