html - 如何购买与标题内联的 Bootstrap 按钮？

Question

我想展示一个 <h4>符合 <button> :

    <h4 style="display:inline-block;">headline</h4>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
        <span>Button</span>
      </button>
    </div>

https://jsfiddle.net/punwaew1/1/

结果:两个元素显示在彼此下方。为什么？

Answer 1

因为h4和.dropdown在同一层。为同一层级的元素设置display: inline-block，使其对齐。

h4,
.dropdown {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

<h4>headline</h4>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
    <span>Button</span>
  </button>
</div>