带有导航栏徽标的引导程序 [重复]

Posted 2023-03-06

【中文标题】带有导航栏徽标的引导程序 [重复]

【英文标题】：Bootstrap with navbar logo [duplicate]

【发布时间】：2017-01-02 08:16:03

【问题描述】：

这是与其他问题不同的问题。因为在这个问题中，侧边栏会包裹到徽标。 我想在我的页面中使用徽标。但是当我使用它时。它不适合屏幕。侧边栏覆盖桌面上的徽标。屏幕截图也附上。 只显示一半的标志。 但是当我在我的手机中打开这个页面时。这看起来不错的样子。

   <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
             <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>
             </button>
            <a  href="index.php"  class="navbar-left"><img src="logo.jpg" ></a>
        </div>
        <!-- /.navbar-header -->

        <ul class="nav navbar-top-links navbar-right">

            <!-- /.dropdown -->

            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="add_user.php"><i class="fa fa-user fa-fw"></i> Add User</a>
                    </li>

                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>
        <!-- /.navbar-top-links -->

        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">

                    <li>
                        <a href="index.php"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
                    </li>

                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>

请帮助我如何适应这张图片？谢谢

【问题讨论】：

指定img标签的高宽属性再试试。

不工作。 #Rahi

试着把它放在 标签之外。

不再工作了。

【参考方案1】：

试试

在标记中

<img class="img-responsive logo" src="logo.jpg" >

在css中

.logo max-width:150px; /* Adjust accordingly */ 

并向侧边栏添加填充/边距。

【讨论】：

真的很有帮助。谢谢