如何使我的徽标和公司名称作为响应
请让我知道如何使用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>
我已经使用的响应和垂直对准的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>
我认为他想要的是最左边的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)
}
如果您更改导航栏的高度,您还需要调整以反映它
<meta name="viewport" content="width=device-width, initial-scale=1.0">
如果你想在LOGO是右侧随时添加这个元标记
没有任何代码对我有帮助。如果我像上面所说的那样添加它,单独在第二页出错 –
,您可以定位它绝对是这样:
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,顶部
您能分享工作小提琴或片段 –
查看媒体查询:https://www.w3schools.com/css/css_rwd_mediaqueries.asp – Sebastian