并排按钮

Question

我尝试使用Bootstrap 4，使一个按钮右侧向下拖动另一个按钮

实际上按钮显示在单独的行上

http://jsfiddle.net/2jx14skv/

<div class="form-group row">
  <div class="col-sm-12">
    <div class="float-right">
      <div class="button-group ">
        <button type="button" class="btn btn-primary" id="searchSamplings">Recherche</button>
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle disabled" type="button" id="dropDownExports" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Exportations</button>
          <div class="dropdown-menu" aria-labelledby="dropDownExports">
            <button class="dropdown-item" type="button">Excel</button>
            <button class="dropdown-item" type="button">Pdf</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如何让他们并肩？

Answer 1

为具有“ dropdown”类的div提供一个自定义类，例如“ cust-drop”，并为其赋予属性 display：inline-block ：

<div class="button-group ">
    <button type="button" class="btn btn-primary" id="searchSamplings">Recherche</button>
    <div class="dropdown cust-drop">
      <button class="btn btn-secondary dropdown-toggle disabled" type="button" id="dropDownExports" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Exportations</button>
      <div class="dropdown-menu" aria-labelledby="dropDownExports">
        <button class="dropdown-item" type="button">Excel</button>
        <button class="dropdown-item" type="button">Pdf</button>
      </div>
    </div>
   </div>

在CSS中：

  .cust-drop {
     display:inline-block !important;
   }

这应该有效。

Answer 2

添加 d-flex 进行分组

class="button-group d-flex ">

Answer 3

HTML

<div class="button-group custom-class">
...
</div>

css

.custom-class {
  display: flex;
}

提琴：http://jsfiddle.net/pandiyancool/h9uy423L/