Bootstrap 3: перекрытие контейнера

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, независимо от того, насколько широко я делаю свой экран.

Мне нужен общий экран этих двух 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, если хотите.