Question

我有一个导航器，当在移动设备上查看时会折叠成一个按钮来打开菜单。

这是相当标准的。可以在这里查看工作演示。

http://www.bootply.com/SyDERpkfFY

我希望旁边有“菜单选项”文字，而不仅仅是一个带图标的按钮。

但是，我似乎只能把文字放在图标栏下面。如何将文本放在图标右侧？

以下是我到目前为止的情况。如果您查看我的演示，菜单选项文本会显示在图标下方，我希望它显示在右侧。

<div class="navbar-header pull-left">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      <span class="navbar-text"> Menu Options</span>
                    </button>
                  </div>

Answer 1

将图标换行到新的父级

   <span class="menu-icon">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
   </span>

并将其添加到css：

.menu-icon {float: left;}

这使得所有图标作为整个块向左浮动。

它的工作原理是因为默认情况下，元素会叠加在另一个上，除非你让它们浮动到某个地方（通常是左或右）。如您所希望整个图标放在左侧，您需要为整个图标添加一个容器，然后将该容器浮动到左侧。

如何将折叠菜单按钮中的文本设置为我的图标右侧？

1 个答案: