引导程序 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>

使用这种样式，无论我的屏幕有多宽，我都会遇到重叠的 Div。

我希望这 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。