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
Bootstrap inline button dropdown within <p> jumbotron
提问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?
这是您要找的吗?

