1

我正在使用带有 Drupal 7 的 Bootstrap 3.6。我有一个用于移动导航栏的汉堡菜单，但是因为我有很多不理解汉堡菜单图标的用户，所以我添加了一个文本标签“菜单”。

问题是“菜单”这个词和汉堡图标出现在不同的行上，并且由于这个词更长，所以间距是关闭的。所以，我想将汉堡图标的位置居中。

这是我的 Drupal 模板中的代码。

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="sr-only"><?php print t('Toggle navigation'); ?></span>
  <div class="text-center">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="navbar-txt"><?php print t('Menu'); ?></span>
  </div>
</button>

不幸的是，text-center似乎不足以使汉堡图标居中。我不太熟悉 Bootstrap 制作图标的方式（通过 span 标签），所以如果有一些技巧可以让它们居中，请告诉我。

4

1 回答 1

1

您可以通过以下方式将按钮中的 3 行（跨度）居中：

.navbar-inverse .navbar-toggle .icon-bar {
  margin-left: auto;
  margin-right: auto;
}
于 2016-04-15T11:27:05.003 回答