Bootstrap 3：容器Div重叠

Question

我正在使用Bootstrap 3.3.7设计一个前端并使用Flatly主题。

我遇到了一个我认为应该有微不足道的解决方案的问题。

我希望将容器拆分为70-30比例，我正在尝试使用此HTML代码：

<div class="container">
 <div class="row">
  <div class="col-sm-6">
   <custom-data-table/>
  </div>

  <div class="col-sm-6">
   <label for="searchQ">Search</label>
   <input
    required
    minlength="1"
    id="searchQ"
    ngModel name="searchQ"
    type="text"
    #searchQ="ngModel"
    (change)="log(searchQ)"/>
   </div>
 </div>
</div>

使用这种风格，无论我的屏幕有多宽，我都会遇到Overlapping Divs。

我想要这些2 DIV以70:30比例共享的屏幕没有重叠。

任何建议/想法都表示赞赏！

这是重叠的问题：

Answer 1

只需使用一个列并使用您自己的自定义逻辑进行划分：

.myThing {
  display:flex;
}
.myThing .firstColumn {
  flex: 0 0 70%;
}
.myThing .second {
  flex: 0 0 30%;
}

<div class="container">
 <div class="row">
  <div class="col-xs-12 myThing">
    <div class="firstColumn"></div>
    <div class="secondColumn"></div>
  </div>
 </div>
</div>

我在这里使用了flex，但如果您愿意，可以使用浮动blocks。