如何在两个不同的div中向右放置一个按钮,向左放置另一个按钮

时间:2019-01-13 17:35:15

标签: html css twitter-bootstrap css3 bootstrap-4

假设有两个按钮和一个想要的在附近。所以我有这段代码:

<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的末尾。现在在div的结尾和开头有太多空间了。有人可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

您看到的空间是iOS引导分类中的默认填充。

只需覆盖它:

.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>