html - 列之间的 Bootstrap 差距

Question

我在我当前的元素中使用了 bootstrap，它工作正常但只有一个故障:

我有 3 col-sm-6彼此相邻，当第二个col-sm-6比第一、第三长col-sm-6向左移动，第一个和第三个之间出现间隙。

我有两点要问:

• 是否有可能/如何消除这种差距。
• 是否可能/如何修复第三个 .col-sm-6 .tasks-panel向左。

这里有 2 张图片展示了我遇到的问题:

• 第二 col-sm-6是短:

• 第二 col-sm-6比第一个长: 我的 html 结构是这样的:

        <h4><span data-head-year></span> <span data-head-month></span></h4>
        <a class="pull-right" id="today"><div class="btn btn-primary" style="margin:3px">Today</div></a>
      </div>
      <hr style="margin: 20px 0"/>
      <div class="day-headers">
        <div class="day header">Mon</div>
        <div class="day header">Tue</div>
        <div class="day header">Wed</div>
        <div class="day header">Thu</div>
        <div class="day header">Fri</div>
        <div class="day header">Sat</div>
        <div class="day header">Sun</div>
      </div>
      <div class="days" data-group="days">
        <!-- the place where days will be generated -->
      </div>
    </div>
    <!-- Responsive calendar - END -->
  </div>
  

  网点参观

      <div class="template outlet-wrapper" style="display: none">
        <div class="outlet-header">
          <div class="col-xs-6">
            <h4 class="outlet-name"></h4>
          </div>
          <div class="col-xs-6 text-right">
            <h5 class="tools" style="display: none">
              <i class="icon-repeat repeat"></i>
              <span class="glyphicon glyphicon-remove remove"></span>
            </h5>
          </div>
        </div>
        <div class="clearfix"> </div>
        <div class="outlet-body"> 
          <div class="col-sm-6">
            Time to reach: <spane class="time-to-reach"></spane>
          </div>
          <div class="col-sm-6">
            Time to leave: <span class="time-to-leave"></span>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <div class="panel-footer">
      <button class="btn btn-primary pull-right" id="add-outlet"> Add Visit </button>
      <div class="clearfix"></div>
    </div>
  </div>
  

  任务列表

    </div>
    <div class="panel-footer">Panel Footer</div>
  </div>
  

抱歉格式错误，我不知道为什么 stackoverflow 编辑器会破坏我的 html 代码；我已经尝试过(Ctrl + K，<pre><code>)但没有一个有效!

如果您有兴趣正确查看我的代码，请在编辑器中显示我的帖子。

提前致谢。

更新:

Codepen 可用 here , 按添加访问以查看如果第二列很长会发生什么情况。

Answer 1

您是否尝试过将“pull-right”应用于“panel panel-primary outlets-panel”的“col-sm-6”容器？

<div class="col-sm-6 pull-right">
<div class="panel panel-primary outlets-panel">
  <div class="panel-heading">
    ...

Forked Codepen

您仍然需要修复“任务列表”容器的上述空间，但这应该是微不足道的。