列之间的Bootstrap差距 [英] Bootstrap Gap Between Columns

问题描述

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

我有3 col-sm-6

code> col-sm-6 长于第一个，第三个 col-sm-6 向左移动，第一个和第三个之间会出现间隔。

我有2个问题要问：

• 有可能/如何消除这种差距。


• 是否有可能/如何将第三个 .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-rightid =today>< div class =btn btn-primarystyle =margin：3px>今天< / 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>星期六< / div> 
< div class =day header> Sun< / div> 
< / div> 
< div class =daysdata-group =days> 
 <！ - 将生成天数的地方 - > 
< / div> 
< / div> 
 <！ - 响应日历 - 结束 - > 
< / div> 
  









出口拜访



 < div class =template outlet-wrapperstyle =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 =toolsstyle =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> 
到达时间：< spane class =到达时间>< / spane> 
< / div> 
< div class =col-sm-6> 
离开时间：< span class =时间离开>< / span> 
< / div> 
< div class =clearfix>< / div> 
< / div> 
< / div> 
< / div> 
< div class =panel-footer> 
< button class =btn btn-primary pull-rightid =add-outlet>添加访问< /按钮> 
< div class =clearfix>< / div> 
< / div> 
< / div> 
  





任务清单




 < / div> 
< div class =panel-footer>面板页脚< / div> 
< / div> 
  




< pre>< code> ），但它们都没有成功！



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





感谢您的进阶。



更新：





一个Codepen可用这里，按添加访问，看看会发生什么，如果第二列很长。

解决方案

向右拉至面板面板 - 主插座面板的col-sm-6容器？

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

Forked Codepen





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




I use bootstrap on my current project, it's working fine but only one glitch:

I have 3 col-sm-6 next to each other, when the second col-sm-6 is longer than the first, third col-sm-6 moves to left and a gap appears between first and third one.

I have 2 points to ask about:

• Is it possible / how to remove that gap.
• Is it possible / how to fix the third .col-sm-6 .tasks-panel to left.

Here is 2 images demonstrate what problem I have:

• Second col-sm-6 is short:

• Second col-sm-6 is longer than the first: My html structure goes like this:

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

  Outlets to visit

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

  Tasks List

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

Sorry for bad format, I don't know why stackoverflow editor breaks my html code; I have tried (Ctrl + K, <pre><code>) but none of them worked !

If you're interested in seeing my code properly, please show my post in editor.

Thanks in advanced.

Update:

A Codepen is available here, press add visit to see what happens if second column is long.

解决方案

Have you tried to apply "pull-right" to the "col-sm-6" container of "panel panel-primary outlets-panel"?

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

Forked Codepen

You'll still have to fix the above space of the "tasks list" container, but that should be trivial.

这篇关于列之间的Bootstrap差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！