Html 引导程序与按钮位于同一行

这是我的代码：

我试着把我的下拉列表和按钮放在同一行。但我不能这样做，因为下拉列表是一个div，并停留在下面的行上。我怎样才能把它们放在同一条线上

<div class="panel panel-default">
  <div class="panel-heading">
    <input type="checkbox">
    <button type="submit" class="btn btn-xs btn-default">Stage</button>
    <button type="submit" class="btn btn-xs btn-default">Add Label</button>
    <button type="submit" class="btn btn-xs btn-default">Send Message</button>
    <button type="submit" class="btn btn-xs btn-default">Archive</button>

    <div class="dropdown">
      <button class="btn btn-xs btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
         Assign to<span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Unsorted <span class="badge">12</span></a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action <span class="badge">42</span></a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here <span class="badge">42</span></a></li>
      </ul>
    </div>

 </div>
Test
</div>

阶段
添加标签
发送消息
档案文件
分配给





试验

将此添加到CSS中：

.dropdown{
    display: inline;
}

---

切勿重写或修改引导基类。。始终添加新类或标识。您可以这样做：

使用class

下拉列表将新类“div inline”添加到div中

添加这个css

.div-inline{
    display:inline-block;
}

---

jsIDLE:

我只有一个下拉按钮和几个“普通”按钮。我使用的是bootstrap，不想编辑CSS，所以我解决了如下问题。它工作，它是在一行，但上述解决方案将更好地工作，如果你有一个以上的下拉列表在同一行

---

我把整个东西（普通按钮和下拉菜单）包装成一个

。然后我更改了自bootstrap 4起的

，您可以从以下位置更改下拉列表：

<div class="dropdown">



致：



这将使所有按钮显示在一行中
 有没有办法用附带的引导类来实现这一点？不要修改它们，这会让你的生活变得困难，我从阅读中发现了这一点。请阅读这篇文章，不要修改引导类。。它会弄乱其他布局。改为创建新类。
<div class="dropdown">

<div class="dropdown d-inline-block">