使用右对齐的 bootstrap 字形时,内联下拉菜单 <li>
Inline dropdown-menu <li> when using bootstrap glyphicons that right align
我在 dropdown-menu
选项中添加了右对齐 (pull-right
) bootstrap glyphicons
。问题是最长的选项在名称和 glyphicon
之间有一个换行符。我怎样才能让他们在同一条线上?当我尝试不使用 pull-right
时,一切都完美对齐。
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a
href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true"
aria-expanded="false">
menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
{foreach from=$item key=sub_title item=sub_item}
<li>
<a
href="{$sub_item.url}"
target="_blank">
{$sub_title}
<span class="glyphicon glyphicon-{$sub_item.icon} pull-right" aria-hidden="true"></span>
</a>
</li>
{/foreach}
</ul>
</li>
</ul>
- 让我们将文本包装在一个单独的块中。
- 带有
float: right;
的图标必须位于文本之前。
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.item-text {
margin-right: 20px;
}
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">menu<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#URL" target="_blank">
<span class="glyphicon glyphicon-tag pull-right" aria-hidden="true"></span>
<span class="item-text">short short</span>
</a>
</li>
<li>
<a href="#URL" target="_blank">
<span class="glyphicon glyphicon-tag pull-right" aria-hidden="true"></span>
<span class="item-text">long long long long long long long long long long long long long</span>
</a>
</li>
<li>
<a href="#URL" target="_blank">
<span class="glyphicon glyphicon-tag pull-right" aria-hidden="true"></span>
<span class="item-text">short short</span>
</a>
</li>
<li>
<a href="#URL" target="_blank">
<span class="glyphicon glyphicon-tag pull-right" aria-hidden="true"></span>
<span class="item-text">short short</span>
</a>
</li>
<li>
<a href="#URL" target="_blank">
<span class="glyphicon glyphicon-tag pull-right" aria-hidden="true"></span>
<span class="item-text">long long long long long long long long long long long long long</span>
</a>
</li>
<li>
<a href="#URL" target="_blank">
<span class="glyphicon glyphicon-tag pull-right" aria-hidden="true"></span>
<span class="item-text">long long long long long long long long long long long long long</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="alert alert-danger visible-xs text-center">
Menu becomes visible in the window with a width of 768px or more.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
我在 dropdown-menu
选项中添加了右对齐 (pull-right
) bootstrap glyphicons
。问题是最长的选项在名称和 glyphicon
之间有一个换行符。我怎样才能让他们在同一条线上?当我尝试不使用 pull-right
时,一切都完美对齐。
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a
href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true"
aria-expanded="false">
menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
{foreach from=$item key=sub_title item=sub_item}
<li>
<a
href="{$sub_item.url}"
target="_blank">
{$sub_title}
<span class="glyphicon glyphicon-{$sub_item.icon} pull-right" aria-hidden="true"></span>
</a>
</li>
{/foreach}
</ul>
</li>
</ul>
- 让我们将文本包装在一个单独的块中。
- 带有
float: right;
的图标必须位于文本之前。
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.item-text {
margin-right: 20px;
}
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">menu<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#URL" target="_blank">
<span class="glyphicon glyphicon-tag pull-right" aria-hidden="true"></span>
<span class="item-text">short short</span>
</a>
</li>
<li>
<a href="#URL" target="_blank">
<span class="glyphicon glyphicon-tag pull-right" aria-hidden="true"></span>
<span class="item-text">long long long long long long long long long long long long long</span>
</a>
</li>
<li>
<a href="#URL" target="_blank">
<span class="glyphicon glyphicon-tag pull-right" aria-hidden="true"></span>
<span class="item-text">short short</span>
</a>
</li>
<li>
<a href="#URL" target="_blank">
<span class="glyphicon glyphicon-tag pull-right" aria-hidden="true"></span>
<span class="item-text">short short</span>
</a>
</li>
<li>
<a href="#URL" target="_blank">
<span class="glyphicon glyphicon-tag pull-right" aria-hidden="true"></span>
<span class="item-text">long long long long long long long long long long long long long</span>
</a>
</li>
<li>
<a href="#URL" target="_blank">
<span class="glyphicon glyphicon-tag pull-right" aria-hidden="true"></span>
<span class="item-text">long long long long long long long long long long long long long</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="alert alert-danger visible-xs text-center">
Menu becomes visible in the window with a width of 768px or more.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>