html - 带有导航栏 Logo 的 Bootstrap

标签 html css twitter-bootstrap-3

<分区>

这是与其他问题不同的问题。因为在这个问题中,侧边栏换成了 Logo 。 我想在我的页面中使用 Logo 。但是当我使用它时。它不适合屏幕。侧栏覆盖桌面上的 Logo 。屏幕截图也附在 this is the result on desktop 上。 仅显示半价 Logo 。 但是当我在我的手机上打开这个页面时。看上去不错。

   <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>

请帮我如何调整这张图片?谢谢

最佳答案

尝试

在标记中

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

在CSS中

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

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

关于html - 带有导航栏 Logo 的 Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39153050/

上一篇:android - 如何在代码中指定倾 Angular 像素?

下一篇:javascript - 蜈蚣状div跟随

相关文章:

javascript - 工具提示隐藏/显示在 Bootstrap 中不起作用

javascript - 使用 Bootstrap 3,如何将 html 添加到工具提示?

javascript - Google Maps API 无法在 iPad 上加载

javascript - 单个 html 文件中的多个内容 'pages'

html - 外部样式表,指定绝对或相对路径

javascript - 是否可以在 .textContent 中使用 <tags> 或它的解决方法?

html - 如何在angularjs中CSS md-tab标签

javascript - 将文本颜色限制为黑色

LESS 中的 Javascript 显得步履蹒跚 : workaround?

html - 如何在 twitter-bootstrap 3 中同时调整最小宽度和最大宽度?