Встроенного выпадающего меню с помощью Bootstrap технологии glyphicons, что правильно выровнять

Я добавил выравнивание по правому краю (pull-right) bootstrap glyphicons в мои параметры dropdown-menu. Проблема в том, что самый длинный вариант получает разрыв строки между именем и 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>

1 3
html twitter-bootstrap smarty

1 ответ:

  1. Давайте заключим текст в отдельный блок.
  2. значок с 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>
1