小型设备上的 Bootstrap 响应式侧边栏徽标渲染答案

【问题标题】：Bootstrap responsive sidebar logo rendering on small devices小型设备上的 Bootstrap 响应式侧边栏徽标渲染
【发布时间】：2014-04-22 19:22:35
【问题描述】：

我尝试使用 Bootstrap3 实现响应式侧边栏菜单，但在小型设备上无法正确渲染

标记看起来像

    <div id="sidebar" class="col-md-3 "> 
//if desktop than display this logo 
         <a class="logo_big" href="<?php bloginfo('url') ?>/" title="<?php bloginfo('name') ?>" rel="homepage">
               <img  class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/library/images/logo.jpg">
         </a>
        <div class="sidebar-nav">
          <div class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
                <span class="visible-sm navbar-brand">
                    //if mobile or tablet us this logo
                    <a class="block-title navbar-brand" href="<?php bloginfo('url') ?>/" title="<?php bloginfo('name') ?>" rel="homepage">
                        <img  class="img-responsive logo" src="<?php echo get_template_directory_uri(); ?>/library/images/logo.jpg">
                    </a>
                </span>
            </div>
            <div class="navbar-collapse collapse sidebar-navbar-collapse">

                <?php bones_main_nav(); ?> 

            </div><!--/.nav-collapse -->
          </div>
        </div>


        <div id="right_sidebar_widgets">
            <?php dynamic_sidebar('sidebar1'); ?>
        </div>
    </div>

在这里我有一个自定义 css 来呈现徽标，但似乎没有显示所需的

.logo{
    display: none;
}

@media screen and (max-width: 800px) {


    a.logo_big{
        display: none;
    }

    .logo{
        max-width: 145px;
        position: relative;
        right: 25px;
        bottom: 25px;
    }


}

【问题讨论】：

你可以添加截图或图表吗？
感谢反馈我截图了

标签： css twitter-bootstrap responsive-design

【解决方案1】：

重要的是要了解max-width: 145px; 将不起作用，除非指定width，per MDN:

max-width CSS 属性用于设置给定的最大宽度元素。它可以防止 width 属性的使用值变得大于为 max-width 指定的值。

您还需要设置徽标的display 属性才能显示。

试试：

.logo{
    display: none;
}

@media screen and (max-width: 800px) {


    a.logo_big{
        display: none;
    }

    .logo{
        width: 145px;
        position: relative;
        display:inline-block; /* <--- set to display */
        right: 25px;
        bottom: 25px;
    }


}

【讨论】：

【解决方案2】：

嗯，你有 .logo {display: none;} 和 .logo_big {display: none;} 试试 display: inline;

【讨论】：