html - col-12-css 列中的固定和流动 div 不会折叠

Question

我试图在 col-12-xs 的一行中放置两个固定宽度的 div 和一个可变宽度的 div。我希望这个流畅的 div 能够填满整个剩余空间，但宽度最小(例如 600px)。

我做了这样的事情:

<div class="container">
  <div class="row">
    <div class="col-12-xs">
      <div class="event">
        <div class="date">
        </div>
        <div class="flyer">
        </div>
        <div class="info">
        </div>
      </div>
    </div>
  </div>
</div>

.date, .flyer, .info {
  float: left;
  border: 1px solid black;
  height:100px;
}

.date, .flyer {
  width: 100px;
}

.info {
  min-width: 600px;
}

它工作正常，但是当我减小窗口大小时，这个 .info div 移动到下一行，这不是我想要的。

我该如何解决这个问题？

http://www.bootply.com/stF3byJ56I#

Answer 1

为 .info 移除 float:left

.date, .flyer, .info {
  border: 1px solid black;
  height:100px;
}
.date, .flyer {
  width: 100px;
  float:left;
}
.info {
  min-width:600px; 
}