twitter-bootstrap <p> jumbotron 中的 Bootstrap 内联按钮下拉菜单

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23961759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 20:51:05  来源:igfitidea点击:

Bootstrap inline button dropdown within <p> jumbotron

htmlcsstwitter-bootstraptwitter-bootstrap-3

提问by C.B.

Currently I have a jumbotron setup with some paragraph text, and I would like to stick a button dropdown inline with the text.

目前我有一个带有一些段落文本的 jumbotron 设置,我想在文本中插入一个按钮下拉列表。

Dropdown button

下拉按钮

<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>

Jumbotron

大屏幕

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

If the dropdown is within the <p>tag, it does not "dropdown" (but renders). If it is outside of the <p>tag it functions fine, but I would like it to be inline with the text and need the text to be in the <p>tag to get the style. Any ideas?

如果下拉列表在<p>标签内,它不会“下拉”(而是呈现)。如果它在<p>标签之外,它可以正常工作,但我希望它与文本内联,并且需要文本在<p>标签中才能获得样式。有任何想法吗?

Things to note -- If I replace the <span>tags with <div>tags, it will work fine within the <p>tags, but won't be inline.

注意事项——如果我用<span>标签替换<div>标签,它会在<p>标签内正常工作,但不会内联。



Solution

解决方案

Added class="pull-left"on the <p>tag to get it inline (from Esotericist's answer)

添加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 -->

回答by Panoply

If you want it inline then you need to use pull-left and pull-right, see here for an example:

如果您希望它内联,则需要使用 pull-left 和 pull-right,请参见此处的示例:

http://www.bootply.com/T2wgdlzhZf

http://www.bootply.com/T2wgdlzhZf

Is it what you are looking for?

这是您要找的吗?