Question

我在我当前的项目中使用bootstrap，它运行正常，但只有一个小故障：

我有3个col-sm-6彼此相邻，当第二个col-sm-6比第一个col-sm-6长，第三个.col-sm-6 .tasks-panel向左移动时，第一个和第三个之间出现间隙。< / p>

我有2点要问：

是否有可能/如何消除这种差距。
是否可以/如何将第三个col-sm-6修复为左侧。

以下是2张图片，展示了我遇到的问题：

第二个col-sm-6很短：

第二个<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">  </div> </div>  </div>比第一个更长： Status 2 我的html结构是这样的：

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

任务列表

<pre><code>

抱歉格式不好，我不知道为什么stackoverflow编辑器会破坏我的HTML代码;我尝试过（Ctrl + K，{{1}}），但没有一个有效！

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

先谢谢。

更新

可以使用Codepen here，按添加访问以查看第二列很长时会发生什么。

Answer 1

您是否尝试过应用＆＃34; pull-right＆＃34;到＆＃34; col-sm-6＆＃34;容器＆＃34;面板 - 主要出口 - 面板＆＃34;？

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

Forked Codepen

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

列之间的Bootstrap间隙

更新

1 个答案: