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

Question

我尝试使用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;
    }


}  

Answer 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;
    }


} 

Answer 2

嗯，你有.logo {display：none;}和.logo_big {display：none;} 尝试使用display：inline;