Как поместить одну кнопку вправо, а другую кнопку влево в двух разных делениях

Question

Предположим, есть две кнопки и желание, которые находятся рядом. Итак, у меня есть этот код:

<div class="form-inline move_down">
   <div class="col-md-3 col-6">
      <button class="btn btn-primary btn-sm move_right_component" type="submit" >NEW
      <i class="fa fa-plus"></i></button>
   </div>
   <div class="col-md-4 col-6">
      <button class="btn btn-default btn-sm" type="button" >BACK<i class="fa fa-arrow-left"></i></button>
   </div>
</div>

где мой код CSS:

.move_right_component{
    float: right;
}

кнопка очень далеко, мне нужно поставить две кнопки рядом. Я хочу, чтобы первая кнопка появилась в конце первого элемента div, а вторая кнопка появилась в начале. Теперь в конце и начале div слишком много места. Кто-нибудь может мне помочь?

Answer 1

Пространство, которое вы видите, является отступом по умолчанию из предложений начальной загрузки.

Просто перезаписать его:

.move_right_component{
    float: right;
}

.col-6 {
    height: 30px;
    border: solid 1px red;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-inline move_down">
  <div class="col-md-3 col-6">
    <button class="btn btn-primary btn-sm move_right_component" type="submit">NEW
                  <i class="fa fa-plus"></i></button>
  </div>
  <div class="col-md-4 col-6">
    <button class="btn btn-default btn-sm" type="button">BACK<i class="fa fa-arrow-left"></i></button>
  </div>
</div>