Question

如何在这组按钮中获得相等的间距？当我向班级添加pull-right时，搜索框和加号按钮将设置在搜索框下方。

                <tr>
                  <th class="col-md-3">
                  <small>Firma</small>
                  <a href="?sort_name=klantnaam&sort=asc" title="'.$lang['sorteer_asc'].'"><span class="glyphicon glyphicon-sort-by-alphabet glyph_sorting" aria-hidden="true"></span></a>
                  <a href="?sort_name=klantnaam&sort=desc" title="'.$lang['sorteer_asc'].'"><span class="glyphicon glyphicon-sort-by-alphabet-alt glyph_sorting" aria-hidden="true"></span></a>
                  </th>
                  <th class="col-md-3"><small>Plaats</small></th>
                  <th class="col-md-3"><small>Telefoon</small></th>
                  <th class="col-md-3">
                      <form action="" method="post">
                        <div class="form-group col-xs-8">
                          <input type="text" class="form-control input-sm" placeholder="Search">
                        </div>
                          <button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                          <button type="button" class="btn btn-sm"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
                      </form>
                  </th>
                </tr>

Answer 1

根据评论进行修改：

将父容器（form）设置为flexbox行，并将其子元素水平居中，其中间的空间均为justify-content:space-between＆amp;垂直与align-items:center。
覆盖bootstrap的.form-control的{{1}}＆amp; padding，这是导致margin s＆amp;之间空间异步的原因。搜索button。

input

form {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}

div.form-group {
  padding: 0;
  margin: 0;
}

在bootstrap组按钮中划分间距

1 个答案: