我正在尝试在卡片中对齐两个div（一个在左边，另一个在右边）

Question

我正在尝试将.time div（左）和.saveIcon div（右）在我创建的.card div中对齐，但是它们似乎水平堆叠在我的.card div的左侧。我敢肯定我缺少一些明显的东西，但是任何帮助将不胜感激。

<div class="jumbotron" style="background-color:white">

  <div class="card col-lg-12">
    <div class="time col-lg-2"></div>
    <div class="card-body col-lg-8">write tasks here</div>
    <button class="saveIcon col-lg-2">
      <i class="fa fa-lock"></i>
    </button>
  </div>

</div>

Answer 1

因此，您提供的代码段存在一些问题，这些问题归结为Bootstrap呈现布局时的期望值。

这里是Bootstrap中col标记的基本用法，应该在外部Grid Layout。

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

如您所见，container必须包装一个row，然后包含一个col元素。

按照Bootstrap Rows and Columns - Do I need to use row?：

是，您需要使用行。只有列可能是行的直接子级

这是由于这些必需规则而导致的修改后的代码：

<div class="container">
  <div class="card">
    <div class="card-block">
      <div class="row">

        <div class="time col-2"></div>

        <div class="card-body col-8">write tasks here</div>

        <button class="saveIcon col-2">
          <i class="fa fa-lock"></i>
        </button>

      </div>
    </div>
  </div>
</div>

此外，请确保您正确引用了Bootstrap：Bootstrap Get Started

这里是JSFiddle，显示了Bootstrap的工作输出。