Кнопка рядом

Question

Я пытаюсь с начальной загрузкой 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

добавить d-flex к группе

class="button-group d-flex ">

Answer 2

HTML

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

css

.custom-class {
  display: flex;
}

скрипка: http://jsfiddle.net/pandiyancool/h9uy423L/

Answer 3

Присвойте div с классом dropdown свой собственный класс, например 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>

In css:

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

Это должно работать.