Question

我的设置中包含以下代码。我的桌面上的徽标显示正常，但在我的手机上我看到两个徽标：1正常我喜欢它（右上角）而另一个正常位于中上层。

<div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <a href="http://example"><img class="logo" src="<?php echo base_url();?>resources/example.png"></a>
   </button>
   <a class="navbar-brand" href="http://example.com"><img src="<?php echo base_url();?>resources//example.png"></a>
</div>

Answer 1

将.hidden-xs课程应用于您要在小型设备上隐藏的徽标。您可能还需要应用它和-sm类，具体取决于断点：

<img class="logo hidden-xs hidden-sm" src="<?php echo base_url();?>resources/example.png">

链接到文档的相关部分： http://getbootstrap.com/css/#responsive-utilities

Answer 2

这是因为您在移动设备上时显示的图像重复相同。

此代码： -

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <a href="http://example"><img class="logo" src="<?php echo base_url();?>resources/example.png"></a> </button>

用于显示图标，以便在移动设备上打开导航栏上的菜单。它通常是汉堡图标（http://cdn.css-tricks.com/wp-content/uploads/2012/10/threelines.png）。

如果您将上面的标记更改为： -

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

然后它会回到正常的汉堡图标。除非你想让你的徽标成为菜单按钮？如果是这样，您需要在CSS中进行媒体查询，以便在移动设备上不显示其他徽标。但我不建议这样做，因为人们不会知道点击移动设备上的徽标会实际显示导航菜单..

希望这有帮助。

在Bootstrap 3中调整不同设备的品牌标识

2 个答案: