html - <p> jumbotron 内的 Bootstrap 内联按钮下拉菜单

Question

目前，我有一个带有一些段落文本的大屏幕设置，我想将一个按钮下拉列表与文本内联。

下拉按钮

<span class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Button... <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Opt 1</a></li>
    <li><a href="#">Opt 2</a></li>
  </ul>
</span>

大屏幕

<div class="jumbotron">
  <h1>Hello!</h1>
  <p>Welcome</p>
  <p>Another paragraph
   <!-- dropdown is here -->
  </p>
</div> <!-- jumbotron -->

如果下拉列表位于 <p> 范围内标签，它不会“下拉”(但呈现)。如果在 <p> 之外标记它功能正常，但我希望它与文本内联，并且需要文本位于 <p> 中标签来获取样式。有什么想法吗？

需要注意的事项 -- 如果我替换 <span>标签为 <div>标签，它将在 <p> 内正常工作标签，但不会内联。

---

解决方案

已添加class="pull-left"关于<p>标签以使其内联(来自 Esotericist 的答案)

<div class="jumbotron">
  <h1>Hello!</h1>
  <p>Welcome</p>
  <p class="pull-left">Another paragraph</p>
   <!-- dropdown is here -->

</div> <!-- jumbotron -->

Answer 1

如果您希望它内联，那么您需要使用左拉和右拉，请参阅此处的示例:

http://www.bootply.com/T2wgdlzhZf

这是你要找的吗？