Question

请让我知道如何使用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>

Answer 1

我使用了flexbox进行响应和垂直对齐。

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

$('.next').on('click',function(){
        parts = modalContainer.find('img').attr('src');
        array = parts.split('/');

        lastsegment = array[array.length-1];

})

Answer 2

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

将行高添加到＆＃34;抱歉＆＃34; （img-responsive）在导航栏中对齐它们

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

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

Answer 3

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

添加此元标记

Answer 4

如果您希望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
}

这样，图像响应div总是在右侧，从右边开始有5px的间隙，顶部

如何使我的徽标和公司名称具有响应性

4 个答案: