Question

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

   <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" alt=""></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>

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

Answer 1

尝试

标记中的

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

并在css中

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

并在侧边栏中添加填充/边距。

带导航栏徽标的Bootstrap

1 个答案: