Question

我有一个Bootstrap下拉菜单，我想在文本的左侧显示一个图标，类似于菜单项在典型桌面应用程序的下拉菜单中的显示方式。

默认情况下，图标左侧似乎有一个排水沟，将其推向右侧比我想要的更远。我可以通过添加CSS来解决这个问题：i { margin-left: -15px; }。但我担心这种绝对定位可能会影响响应能力。

有没有办法使用现有的Bootstrap类实现这种效果？

以下代码段有望展示我的意思：

i {
  margin-left: -15px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#"><i class="glyphicon glyphicon-tint"></i> Item 1</a></li>
  </ul>
</div>

非常感谢！

Answer 1

如果您不想提供margin-left:-15px，那么您还可以减少padding-left元素的a：

.btn-group .dropdown-menu > li > a{
  padding-left:5px;
}

＆＃13;

.btn-group .dropdown-menu > li > a{
  padding-left:5px;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#"><i class="glyphicon glyphicon-tint"></i> Item 1</a></li>
  </ul>
</div>

＆＃13;

在Bootstrap 3下拉菜单中左对齐图标

1 个答案: