如何使我的徽标和公司名称作为响应

请让我知道如何使用HTML和CSS进行响应编辑。就好像我缩小屏幕尺寸一样，它显示出不同的对齐方式如何使我的徽标和公司名称作为响应

<div class="navbar navbar-default navbar-static-top" role="navigation"> 
 
     <div class="container-fluid"> 
 
       <!-- Brand and toggle get grouped for better mobile display --> 
 
       <div class="col-xs-12"> 
 
       <div id="logo"> 
 
        <a class="navbar-brand" href="http://www.belltele.co.in" 
 
      target="_blank"><font color="#e5001e">MY COMPANY NAME</font></a> 
 
       <div class = "img-responsive"> 
 
        <img src="logow.jpg" class="img-responsive" alt=" SORRY" 
 
      style="float:right"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>  
 
</div>

来源

2017-06-21 Vidhya Vidu

您能分享工作小提琴或片段 –

查看媒体查询：https：//www.w3schools.com/css/css_rwd_mediaqueries.asp – Sebastian

我已经使用的响应和垂直对准的Flexbox的。

#logo { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
} 
 

 
.navbar-brand { 
 
    color: #e5001e; 
 
    margin-right: 1em; 
 
}

<div class="navbar navbar-default navbar-static-top" role="navigation"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="col-xs-12"> 
 
     <div id="logo"> 
 

 
     <a class="navbar-brand" href="http://www.belltele.co.in" target="_blank">MY COMPANY NAME</a> 
 
     <div class="img-responsive"> 
 
      <img src="http://placehold.it/50" class="img-responsive" alt="SORRY"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-06-21 06:29:39 Gerard

我认为他想要的是最左边的logo和最左边的公司名称，这可以通过在'＃logo'上进一步添加'justify-content：space-between;'来实现CSS。 :) –

如果需要正确的路线，你是绝对正确的Karan。或者，margin-left：auto; img-responsive也可以。 – Gerard

我试了一下，但标题和标志不在页面上。只有其他细节在页面中，如果我调整它的大小，我需要做正确的滚动，只有标题我可以在右侧看到，完全不同。在我的公司名称标志之后，我有响应表，它是正确的形式。 –

试试这个： https://codepen.io/NickHG/pen/WOjymd

添加行高度 “对不起”（IMG响应）来调整它们在导航栏

.img-responsive{ 
    line-height:50px; //(bootstrap default navbar height is 50px) 
}

如果您更改导航栏的高度，您还需要调整以反映它

来源

2017-06-21 06:31:04 Nick

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果你想在LOGO是右侧随时添加这个元标记

来源

2017-06-21 06:41:43 Max3no

没有任何代码对我有帮助。如果我像上面所说的那样添加它，单独在第二页出错 –

，您可以定位它绝对是这样：

div.image-responsive{ 
position: absolute; 
top: 5px; //add a space of 5px from the top 
right: 5px; //add a space of 5px from the right 
}

通过这种方式，图像响应格总是在右侧，距离右侧5px，顶部

来源

2017-06-21 08:47:08 Strix

如何使我的徽标和公司名称作为响应

回答

相关问题