Question

我使用Bootstrap 3.6和Drupal 7.我有一个汉堡包菜单用于移动导航栏，但由于我有很多用户不了解汉堡包菜单图标，我添加了一个文字标签，＆＃34;菜单。＆＃34;

问题是“＆＃34; menu＆＃34;并且汉堡包图标出现在另一条线上，由于单词较长，因此间距关闭。所以，我想把汉堡包图标的位置放在中心位置。

以下是我的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标签），所以如果有一些技巧可以让它们居中，请告诉我。

Answer 1

您可以将按钮中的3行（跨度）居中：

.navbar-inverse .navbar-toggle .icon-bar {
  margin-left: auto;
  margin-right: auto;
}

如何将汉堡包菜单图标置于引导程序中心？

1 个答案: